Filling up a circle progress bar [closed]

问题

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 3 months ago.

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.

回答1:

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>

回答2:

Try to create the orange "growing" part like this:

JsFiddle

JavaScript

The point here is simply resizing the orange rectangle.

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

Black background and white foreground will be static individual shapes.

来源：https://stackoverflow.com/questions/30138369/filling-up-a-circle-progress-bar