如何在进度条上覆盖可填充检查点

Question

我有一个带有几个“检查点”的进度条。

​

​

我希望检查点是线性填充的进度条到达点的一种方式，看起来很自然。当进度条从左到右填充时，它应该填充一个检查点，然后停止，直到它接收到一些进一步的用户交互。

我以前使用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>

Answer 1

如果您将CSS中的base64编码图像视为纯CSS，则可以通过将它们覆盖在进度条上来将它们用作掩码。

​

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

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

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

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

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

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

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

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

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

​