创建水平多彩进度条

在HTML中，创建一个DIV元素并添加一个内部div元素，作为进度条的填充。 使用CSS属性实现彩虹色渐变背景，可以使用线性渐变或径向渐变。 使用JavaScript / jQuery设置动画实现进度条的动态变化。 以下是示例代码：

HTML:

<div class="progress-container"> <div class="progress-bar"></div> </div>

CSS:

.progress-container { width: 100%; height: 20px; background-color: #ddd; } .progress-bar { height: 100%; background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); animation: progress 5s linear infinite; }

@keyframes progress { from { width: 0%; } to { width: 100%; } }

JavaScript:

$( document ).ready(function() { var progressBarWidth = 0; var progressBarInterval = setInterval(function() { if (progressBarWidth >= 100) { clearInterval(progressBarInterval); } else { progressBarWidth += 1; $('.progress-bar').css('width', progressBarWidth + '%'); } }, 50); })

这会创建一个彩虹色渐变的进度条，它会动态地填满整个进度条，时间是5秒钟。