jQuery/CSS barre de progression en demi-cercle avec différentes couleurs

Question

Je suis nouveau sur jQuery et CSS3. J'ai besoin le code HTML suivant pour ressembler à ceci:

S'il vous plaît aidez-moi.

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

éléments HTML de niveau bloc ont quelques restrictions:

Ils doivent être séparés du texte environnant par des lignes vides. Les points de début et de fin de l'élément de bloc le plus à l'extérieur ne doivent pas être indentés. Le démarquage ne peut pas être utilisé dans les blocs HTML.

Answer 1

Ici, il est,

Je ne suis pas vraiment votre question, mais voici ce que je suis venu avec, vous pouvez apporter des modifications en conséquence.

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

ajouter les préfixes Est-ce fournisseur pour des propriétés telles que l'animation, transformation, etc.

Hope it helps!