填写圆形进度条

Question

我在这个网站上搜索了多个渐进式圆圈样本,但没有找到类似于我的要求.

我正在尝试创建从下到上填充的进度圆.%百分比值将从文本框传递.

圆形进步栏填满http://i59.tinypic.com/ofvwbq.png

Answer 1

您可以使用变换和过渡来处理动画:(将鼠标悬停在圆圈上)

#count{
    position:relative;
    border-radius:50%;
    overflow:hidden;
    line-height:200px;
    width:200px;
    text-align:center;
    background:#000;
    color:#fff;
    z-index:1;
}
#count span{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background: red;
    z-index:-1;
    transform:scaleY(0.001);
    transition:transform 3s;
    transform-origin:50% 100%;
}
#count:hover span{
    transform:scaleY(1);
}

<div id="count">100%<span></span></div>