填充圆形进度条 [英] Filling up a circle progress bar

问题描述

我搜索了多个渐进循环样本的网站，但没有找到类似我的要求。

I've search this website with multiple progressive circle sample but did not find similar to my requirement.

我试图创建从下到上填充的进度圆最佳。 ％百分比值将从文本框中传出。

I'm trying to create progress circle filled from bottom to top. The % percent value will pass from textbox.

round progressive bar filling up http://i59.tinypic.com/ofvwbq.png

推荐答案

您可以处理具有转换和转换的动画：（悬停圆圈）

You could handle the animation with transforms and transitions : (Hover the circle)

#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>

这篇关于填充圆形进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！