不同顏色的jQuery/CSS半圓進度條

我是jQuery和CSS3的新手。我需要以下HTML看起來像這樣：不同顏色的jQuery/CSS半圓進度條

here

請幫助我。

<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元素有一些限制：

他們必須從空行周圍的文字分開。最外面的塊元素的開始和結束標記不得縮進。 Markdown無法在HTML塊中使用。

來源

2017-07-26 KPY

歡迎來到StackOverflow！你到目前爲止嘗試過什麼嗎？ StackOverflow不是一個免費的代碼寫入服務，並期望你[**嘗試首先解決你自己的問題**]（http://meta.stackoverflow.com/questions/261592）。請更新您的問題以顯示您已經嘗試的內容，在[**最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve）中展示您面臨的特定問題。有關詳細信息，請參閱[**如何提出良好問題**]（http://stackoverflow.com/help/how-to-ask），並參加[**網站**之旅]（http ： –

這，

我並沒有真正得到你的問題，但這裏是我因此想到了，你可以進行更改。

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

做增加對性的供應商前綴，如動畫，變換等

希望它能幫助！

來源

2017-07-27 03:33:57

感謝您的回覆.. 我需要像https://jsfiddle.net/sqwdkrg0/1782/ ..與不同的顏色和文字，如階段25％50％75 ％.. 希望你能理解.. – KPY

不同顏色的jQuery/CSS半圓進度條

回答

相關問題