填满圆形进度条

Question

我用多个渐进圆圈示例搜索了这个网站，但没有找到与我的要求相似的内容。

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

Answer 1

尝试像这样创建橙色的“生长”部分：

JavaScript

这里的重点只是调整橙色矩形的大小。

function resize(i) {
    console.log(i);
    jQuery('#loadRec').height(i%100);
    i++;
}

黑色背景和白色前景将是静态的独立形状。

Answer 2

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

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

填满圆形进度条

Filling up a circle progress bar

css

css-shapes

JavaScript