build semi circle progress bar with round corners and shadow in javascript and CSS

Question

I searched a lot and finding nothing on it. I want to make a progress bar with round corners.progress bar need to have shadow. All I did a

Answer 1

I want to suggest some stupid but quick solution since you're already using position: absolute. You can add background color to the circles when your animation starts.

html:

    

    

    

        

    
    0%

css:

/** all your css here **/
body{
    background-color:#3F63D3;  
}

.progress-bar{
    position: relative;
    margin: 4px;
    float: left;
    text-align: center;
}
.barOverflow{ 
    position: relative;
    overflow: hidden; 
    width: 150px; height: 70px; 
    margin-bottom: -14px;
}
.bar{
    position: absolute;
    top: 0; left: 0;
    width: 150px; height: 150px; 
    border-radius: 50%;
    box-sizing: border-box;
    border: 15px solid gray;       
    border-bottom-color: white; 
    border-right-color: white;
    transform: rotate(45deg);
}
.progress-bar > .left {
    position: absolute;
    background: white;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    left: 0;
    bottom: -4px;
    overflow: hidden;
}
.progress-bar > .right {
    position: absolute;
    background: white;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    right: 0;
    bottom: -4px;
    overflow: hidden;
}
.back {
    width: 15px;
    height: 15px;
    background: gray;
    position: absolute;
}

jquery:

$(".progress-bar").each(function(){
    var bar = $(this).find(".bar");
    var val = $(this).find("span");
    var per = parseInt( val.text(), 10);
    var $right = $('.right');
    var $back = $('.back');

$({p:0}).animate({p:per}, {
    duration: 3000,
    step: function(p) {
        bar.css({
            transform: "rotate("+ (45+(p*1.8)) +"deg)"
        });
    val.text(p|0);
    }
}).delay( 200 );

if (per == 100) {
    $back.delay( 2600 ).animate({'top': '18px'}, 200 );
}

if (per == 0) {
    $('.left').css('background', 'gray');
}
});

https://jsfiddle.net/y86qs0a9/7/