Filling up a circle progress bar

Question

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.

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