円形プログレスバー（ボーダー）

Question

私はdribbble上でこれを見つけた：

dribbble.com

は、それが最初に（プログレスバーは、円の外側の境界線である）、この円形プログレスバーを作成することが可能です〜 GIFの3秒ですか？

はこれまでのところ、私は、任意のアニメーションなしサークル自体を持っている：

jsfiddle.net

は、どのように私はここから上に行くのでしょうか？

はHTML：

<div class="circle"></div> 

CSS：

body { 
    background-color: #3a88cd; 
    padding: 60px; 
} 

.circle { 
    width: 60px; 
    height: 60px; 
    background: white; 
    position: relative; 
    border-radius: 100%; 
} 

.circle:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    top: -8px; 
    left: -8px; 
    bottom: -8px; 
    right: -8px; 
    border: 3px solid white; 
    border-radius: 100%; 
} 

Answer 1

まあ、それは楽しみでした。殺す時間があったので、私はこれを挑戦として取り上げて走った。 JSFiddleのSCSSでコード化されています。私はSCSSの上にいくつかの変数を加えてすべてを調整しました。 jQueryは、クラスを追加するclickイベントのためだけに存在します。

https://jsfiddle.net/44ch0p8u/11/

そして、それはここに住んで参照するには非Sassのバージョン：

$('.circle').on('click', function() { 
 
    $this = $(this); 
 
    $this.removeClass('animate'); 
 
    setTimeout(function() { 
 
    $this.addClass('animate'); 
 
    }, 50) 
 
})

body { 
 
    background-color: #3a88cd; 
 
    padding: 60px; 
 
} 
 
.circle { 
 
    cursor: pointer; 
 
    width: 74px; 
 
    height: 74px; 
 
    position: relative; 
 
    border-radius: 50%; 
 
} 
 
.circle-right { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
} 
 
.circle-right:before { 
 
    content: ''; 
 
    background: #fff; 
 
    border-radius: 0 60px 60px 0; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 
.circle-right:after { 
 
    content: ''; 
 
    background: #3a88cd; 
 
    border-radius: 0 60px 60px 0; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    z-index: 1; 
 
    transform-origin: 0 50%; 
 
    transform: scale(1.1); 
 
} 
 
.circle.animate .circle-right:after { 
 
    animation: circle-half 1s forwards ease-in; 
 
} 
 
.circle-left { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 50%; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
    z-index: 1; 
 
} 
 
.circle-left:before { 
 
    content: ''; 
 
    background: #fff; 
 
    border-radius: 60px 0 0 60px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 
.circle-left:after { 
 
    content: ''; 
 
    background: #3a88cd; 
 
    border-radius: 60px 0 0 60px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    z-index: 1; 
 
    transform-origin: 100% 50%; 
 
    transform: scale(1.1); 
 
} 
 
.circle.animate .circle-left:after { 
 
    animation: circle-half 1s 1s forwards ease-out; 
 
} 
 
.circle-inner { 
 
    background: #3a88cd; 
 
    border-radius: 50%; 
 
    position: relative; 
 
    width: 68px; 
 
    height: 68px; 
 
    top: 3px; 
 
    left: 3px; 
 
    z-index: 3; 
 
} 
 
.circle-inner:before { 
 
    content: ''; 
 
    background: #fff; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    width: 60px; 
 
    height: 60px; 
 
    top: 4px; 
 
    left: 4px; 
 
} 
 
@keyframes circle-half { 
 
    from { 
 
    transform: rotate(0deg) scale(1.1); 
 
    } 
 
    to { 
 
    transform: rotate(180deg) scale(1.1); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="circle"> 
 
    <div class="circle-inner"></div> 
 
    <div class="circle-left"></div> 
 
    <div class="circle-right"></div> 
 
</div>