異なる色のjQuery/CSS半円プログレスバー

Question

jQueryとCSS3の新機能です。私は、次のHTMLは次のようになりする必要があります。

私を助けてください。

<pre> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<div class="progress"> 
    <div class="barOverflow"> 
    <div class="bar"></div> 
    </div> 
    <span>10</span>% 
</div> 

<div class="progress"> 
    <div class="barOverflow"> 
    <div class="bar"></div> 
    </div> 
    <span>100</span>% 
</div> 

<div class="progress"> 
    <div class="barOverflow"> 
    <div class="bar"></div> 
    </div> 
    <span>34</span>% 
</div> 

<div class="progress"> 
    <div class="barOverflow"> 
    <div class="bar"></div> 
    </div> 
    <span>67</span>% 
</div> 
</pre> 

ブロックレベルのHTML要素はいくつかの制限があります。

彼らは空行で、周囲のテキストから分離しなければなりません。 最も外側のブロック要素の開始タグと終了タグをインデントしてはいけません。 HTMLブロック内でマークダウンを使用することはできません。

Answer 1

ここでは、私が実際にあなたの質問を得るが、ここで私が思い付いたものですしていない、あなたはそれに応じて変更を加えることができ、

です。

HTML

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

CSS

.circle { 
    background: transparent; 
    width: 120px; height: 120px; 
    border: 12px solid; 
    border-top-color: blue; 
    border-right-color: red; 
    border-bottom-color: green; 
    border-left-color: yellow; 
    border-radius: 50%; 
    animation: spin 2s linear infinite; 
} 

@keyframes spin { 
    0% { transform: rotate(0deg) } 
    100% { transform: rotate(359deg) } 
} 

変換、アニメーションなどの特性のため、ベンダープレフィックスを追加するなど

はそれが役に立てば幸い！