JavaスクリプトとCSSの丸い角と影を持つ半円の進行状況バーを作成する

Question

私は多くを検索して何も見つけませんでした。私はの角丸で進捗バーを作っています進行バーはの影がありますを持っている必要があります。私は今のようでしたすべてはここにある：

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

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

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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress-bar"> 
 
    <div class="barOverflow"> 
 
    <div class="bar"></div> 
 
    </div> 
 
    <span>100</span>% 
 
</div>

私はと影を持つラウンドコーナーを作りたいです。与えられたイメージの下に、実際に私が望むものが表されます。描くことを知らないので、影が欠けている。 ：

私もProgressbar.jsを試してみましたが、私はSVGについての多くの知識を持っていません。いずれの答えも高く評価されます。

Answer 1

@jaromanda SVGを学ぶことの提案です。

はい、ボーダー半径から達成するのは非常に困難です。だから私はSVGを見て、それはかなり便利だと思う。ここに私の抜粋です。

// progressbar.js@1.0.0 version is used 
 
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/ 
 

 
var bar = new ProgressBar.SemiCircle(container, { 
 
    strokeWidth: 10, 
 
    color: 'red', 
 
    trailColor: '#eee', 
 
    trailWidth: 10, 
 
    easing: 'easeInOut', 
 
    duration: 1400, 
 
    svgStyle: null, 
 
    text: { 
 
    value: '', 
 
    alignToBottom: false 
 
    }, 
 
    
 
    // Set default step function for all animate calls 
 
    step: (state, bar) => { 
 
    bar.path.setAttribute('stroke', state.color); 
 
    var value = Math.round(bar.value() * 100); 
 
    if (value === 0) { 
 
     bar.setText(''); 
 
    } else { 
 
     bar.setText(value+"%"); 
 
    } 
 

 
    bar.text.style.color = state.color; 
 
    } 
 
}); 
 
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif'; 
 
bar.text.style.fontSize = '2rem'; 
 

 
bar.animate(0.45); // Number from 0.0 to 1.0

#container { 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 

 
svg { 
 
    height: 120px; 
 
    width: 200px; 
 
    fill: none; 
 
    stroke: red; 
 
    stroke-width: 10; 
 
    stroke-linecap: round; 
 
    -webkit-filter: drop-shadow(-3px -2px 5px gray); 
 
    filter: drop-shadow(-3px -2px 5px gray); 
 
    }

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script> 
 
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css"> 
 
<div id="container"></div>

Answer 2

すでにの位置を使用しているので、愚かでも迅速な解決方法を提案したいと思います。絶対。アニメーションの開始時にサークルに背景色を追加できます。

HTML：

<div class="progress-bar"> 
    <div class="left"></div> 
    <div class="right"><div class="back"></div></div> 
    <div class="barOverflow"> 
     <div class="bar"></div> 
    </div> 
    <span>0</span>% 
</div> 

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/