我很努力爲網站實現自定義進度條。這是形狀，它應該有：自定義形狀進度條
當用戶選擇了一圈，我想行（也是唯一的線，而不是圓）來填充不同的顏色，直到它到達圓，最後那個紅點應該出現在中間，有這個作爲最終結果，如果用戶點擊了第三圈：
我不知道什麼可能是最好的主意，這個簡單的方法。我嘗試了一些純CSS，jQuery和JavaScript解決方案，但沒有人可以重新創建這種效果。我是否應該有兩個圖像並逐漸覆蓋它們，直到只到達單擊的點？我應該完全忘記圖像並嘗試使用CSS或SVG重新創建圖形並更改某個部分的顏色？
我通常都知道問題在這裏有一些代碼，但我不能表現出任何，因爲我沒有什麼辦法的主意，採取和研究網上導致解決方案的無窮多小時，並不適用於我的情況。
在此先感謝。
它與CSS的混合和一點點的jQuery相當簡單。
// Add click handler to the original dots
$("UL.progress LI").click(function(e) {
// Deselect current selection
$("UL.progress LI.selected").removeClass("selected");
var newDot = $(this);
// Which dot are we selecting?
var newProgressWidth = newDot.index();
// Animate the new width of the red line
$("UL.progress LI.progressline").animate(
{'width': (newProgressWidth * 90) + 'px'},
400,
function() {
// When done, select the new dot
newDot.addClass("selected");
});
});
// Add the black and red bars as additional <li> elements
// without click handlers
$("<li>").addClass("blackbar").appendTo("UL.progress");
$("<li>").addClass("progressline").appendTo("UL.progress");
// Select the first dot
$("UL.progress LI").first().addClass("selected");UL.progress {
list-style: none;
padding: 0;
position: relative;
}
/* the black dots */
UL.progress LI {
float: left;
width: 60px;
height: 60px;
background-color: black;
border-radius: 50%;
margin-left: 30px;
position: relative;
cursor: pointer;
}
/* first black dot has no gap to the left */
UL.progress LI:first-child {
margin-left: 0;
}
/* red dot when selected */
UL.progress LI.selected:after {
content: '';
display: block;
position: absolute;
top: 15px;
left: 15px;
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
}
/* the black and red lines at the back*/
UL.progress LI.blackbar,
UL.progress LI.progressline {
z-index: -2;
content: '';
display: block;
position: absolute;
top: 28px;
left: 30px; /* 60 (diameter)/2 */
width: 450px; /* 5*60 + 5*30 (dot diameter and gap) */
height: 4px;
background-color: black;
margin-left: 0;
border-radius: 0;
}
/* the black line */
UL.progress LI.blackbar {
z-index: -2;
background-color: black;
}
/* the red progress line */
UL.progress LI.progressline {
z-index: -1;
background-color: red;
width: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Example progress bar<br/>
<ul class="progress">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>我會直接創建上面黑的一條紅線。然後使用jquery的動畫來增加寬度，直到達到所需的圓。然後，一旦完成，做一些類似的做紅圈（如果你想它擴大，否則就把它放在那裏）
簡單的方法是使黑色線和點的SVG或PNG BG使用它作爲背景repeat-x，然後將紅色部分也作爲圖像放在bg頂部，並使用新的html元素，並使用background-repeat。然後，您可以使用css/js更改寬度爲紅色的元素以填充進度條。
這是不可思議的，這正是我的意思，非常感謝！我會把你的名字評論上面的CSS和jQuery。 – 2014-11-21 15:06:19