如何覆蓋進度條上的可填充檢查點

我想檢查點被線性填充的進度條達到在出現自然的方式到達點。當進度條從左到右填充時，它應該填充檢查點，然後停止，直到它收到一些進一步的用戶交互。

我以前使用jQuery來填充每個檢查點，當進度條到達時通過向進度填充動畫結束時向其應用CSS類來填充每個檢查點。這看起來非常業餘，但。我想讓相同的填充動畫應用於進度條和停在的檢查點。

我該如何使用純CSS做到這一點？

<div class="progress"> 
      <div class="progress-bar"> 
       <div class="progress-indicator item-0"></div> 
       <div class="progress-indicator item-1"></div> 
       <div class="progress-indicator item-2"></div> 
       <span class="progress-bar-fill-area" style="width: 22.5%;"></span> 
      </div> 
     </div>

來源

2015-09-25 chopper draw lion4

你真的問如何用顏色填充了一圈，從一個側面？ – isherwood

而不是解釋你在做什麼，請顯示你當前的代碼。 – Roope

^^到目前爲止您使用的CSS將會非常有用。 –

如果考慮在CSS編碼的圖像爲純CSS的base64，你可以用它們作爲掩模，通過疊加它們在你的進度條。

var n = 0; 
 
setInterval(function() { 
 
\t var bar = document.querySelector(".progress"); 
 
\t bar.classList.remove("step" + ((n + 4) % 5)); 
 
\t bar.classList.add("step" + n); 
 
\t n = (n + 1) % 5; 
 
}, 2000);

.progress-bar { 
 
\t width: 500px; 
 
\t height: 32px; 
 
\t background-color: gray; 
 
\t position: relative; 
 
} 
 

 
.progress-indicator { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH0AAAAgCAYAAAA/kHcMAAABFUlEQVRo3u3YPW6DMBiAYX8VMyLeQb4DopUyVaIsmfFteoWexGLuQL1GSiNfAg6A2JHcsR36k6FSVed9Vjz51YcNUtd1VLgqN2wB0UF0EB1EB9FBdBAdRAfR8QtERGmtvTHmEEKQEIIYYw5aay8i7+v4DZuGLMu2qqr2zrnzZ8+ttc00Tcdt2zImPZEJL8uy+yq4Uko5585VVe1FhElPQVEUr977u0vWdl33wo4BAJDIxY+L3P+ntfbjOD5csrZt2xOfbAlYlqW11jY/rev7/n5d11uiJyDGqKZpOn4X3lrbzPM8xhh5vSd1Vouo3W7n8zx/Gobh+cN0Py7L0sYYOdOvFa93ooPoIDqIDqKD6CA6iI4/9AZ+BlVJ/MotKwAAAABJRU5ErkJggg=='); 
 
\t float: left; 
 
} 
 

 
.progress-bar-fill-area { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t background-color: #63BC62; 
 
\t width: 0%; 
 
} 
 

 
.step1 .progress-bar-fill-area { 
 
\t width: 25%; 
 
\t transition: width 1s; 
 
} 
 

 
.step2 .progress-bar-fill-area { 
 
\t width: 50%; 
 
\t transition: width 1s; 
 
} 
 

 
.step3 .progress-bar-fill-area { 
 
\t width: 75%; 
 
\t transition: width 1s; 
 
} 
 

 
.step4 .progress-bar-fill-area { 
 
\t width: 100%; 
 
\t transition: width 1s; 
 
}

<div class="progress"> 
 
\t <div class="progress-bar"> 
 
\t \t <div class="progress-bar-fill-area"></div> 
 
\t \t <div class="progress-indicator"></div> 
 
\t </div> 
 
</div>

來源

2015-09-25 21:14:00

如何覆蓋進度條上的可填充檢查點

回答

相關問題