js实现一个带有渐变动画的进度条效果

以下是一个使用JavaScript实现带有渐变动画的进度条效果的示例代码：

HTML部分：

html

CSS部分：

css
.progress-bar {
width: 200px;
height: 20px;
border-radius: 10px;
background-color: #ddd;
overflow: hidden;
}

.progress {
height: 100%;
background: linear-gradient(to right, #ff0000, #00ff00);
width: 0;
transition: width 1s ease-in-out;
}

JavaScript部分：

javascript
function setProgress(progress) {
var progressBar = document.querySelector('.progress');
progressBar.style.width = progress + '%';
}

function animateProgress() {
var progress = 0;
var interval = setInterval(function() {
progress += 1;
setProgress(progress);

if (progress >= 100) {
clearInterval(interval);
}
}, 10);
}

animateProgress();

这段代码首先定义了一个`setProgress`函数，用于设置进度条的进度。然后定义了一个`animateProgress`函数，用于实现进度条的动画效果。

`animateProgress`函数使用`setInterval`方法每隔10毫秒增加进度值，然后调用`setProgress`函数设置进度条的进度。当进度达到100时，使用`clearInterval`方法清除定时器。

在页面加载完成后，调用`animateProgress`函数即可开始进度条的动画效果。