cssのみでイメージ上に円形の進行状況バーを作成するにはどうすればよいですか？

Question

イメージの上に円形のプログレスバーを作成しようとしています。

100％のときは、進捗を非表示にします。どんな助け？

Answer 1

それを行うことが可能だプラグインがあります：jQuery.knob。

$(function() { 
 
    $(".knob").knob(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script> 
 
<input class="knob" data-width="150" data-width="100" data-displayInput="false" data-displayPrevious="true" data-fgColor="#87ceeb" data-skin="tron" data-thickness="15" value="75" />

あなたはそれがアニメ化したい場合は、入力のvalueを変更することができます！ノブの上にマウスを置き、マウスホイールを使ってスクロールしてください。または、こちらをご覧ください：jQuery Knob update value with animate

Answer 2

これにはCSSアニメーションを使用できます。あなたがスムーズに円を隠したい場合は、円の半分のためのアニメーションを追加することができます。また

.circle { 
 
    display: inline-flex; 
 
    border-radius: 100%; 
 
    background-image: url("https://i.stack.imgur.com/sRV6Q.jpg"); 
 
    overflow: hidden; 
 
} 
 

 
.circle__half { 
 
    height: 200px; 
 
    width: 100px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.circle__half:before { 
 
    height: inherit; 
 
    width: inherit; 
 
    position: absolute; 
 
    content: ""; 
 
    border-radius: 100px 0 0 100px; 
 
    background-color: lime; 
 
    transform-origin: 100% 50%; 
 
    /* hidden by default */ 
 
    transform: rotate(180deg); 
 
    opacity: 0.65; 
 
    animation-name: rotate-circle-half; 
 
    animation-duration: 4s; 
 
    animation-timing-function: linear; 
 
} 
 

 
.circle__half--right { 
 
    transform: scale(-1, -1); 
 
} 
 

 
.circle .circle__half--right:before { 
 
    animation-name: rotate-circle-half--right; 
 
} 
 

 
/* show half of circle half of the time */ 
 
@keyframes rotate-circle-half { 
 
    0% { 
 
    transform: rotate(180deg); 
 
    } 
 
    50% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(0deg); 
 
    } 
 
} 
 

 
@keyframes rotate-circle-half--right { 
 
    0% { 
 
    transform: rotate(180deg); 
 
    } 
 
    50% { 
 
    transform: rotate(180deg); 
 
    } 
 
    100% { 
 
    transform: rotate(0deg); 
 
    } 
 
}

<div class="circle"> 
 
    <div class="circle__half"></div> 
 
    <div class="circle__half circle__half--right"></div> 
 
</div>

：このソリューションでは、アニメーションの円の半分を使用しています

あなたです

.circle { 
 
    display: inline-flex; 
 
    border-radius: 100%; 
 
    background-image: url("https://i.stack.imgur.com/sRV6Q.jpg"); 
 
    overflow: hidden; 
 
} 
 

 
.circle__half { 
 
    height: 200px; 
 
    width: 100px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    animation-name: hide-smoothly; 
 
    animation-duration: 2s; 
 
    animation-delay: 4s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.circle__half:before { 
 
    height: inherit; 
 
    width: inherit; 
 
    position: absolute; 
 
    content: ""; 
 
    border-radius: 100px 0 0 100px; 
 
    background-color: lime; 
 
    transform-origin: 100% 50%; 
 
    /* hidden by default */ 
 
    transform: rotate(180deg); 
 
    opacity: 0.65; 
 
    animation-name: rotate-circle-half; 
 
    animation-duration: 4s; 
 
    animation-timing-function: linear; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.circle__half--right { 
 
    transform: scale(-1, -1); 
 
} 
 

 
.circle .circle__half--right:before { 
 
    animation-name: rotate-circle-half--right; 
 
} 
 

 
/* show half of circle half of the time */ 
 
@keyframes rotate-circle-half { 
 
    0% { 
 
    transform: rotate(180deg); 
 
    } 
 
    50% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(0deg); 
 
    } 
 
} 
 

 
@keyframes rotate-circle-half--right { 
 
    0% { 
 
    transform: rotate(180deg); 
 
    } 
 
    50% { 
 
    transform: rotate(180deg); 
 
    } 
 
    100% { 
 
    transform: rotate(0deg); 
 
    } 
 
} 
 

 
@keyframes hide-smoothly { 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    } 
 
}

<div class="circle"> 
 
    <div class="circle__half"></div> 
 
    <div class="circle__half circle__half--right"></div> 
 
</div>