HTML代码
<div class="progress"> <span class="progress-bar" style="width: 75%"></span> </div>
CSS代码
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
background: #191919;
}
.progress {
width: 100%;
max-width: 260px;
height: 6px;
background: #e1e4e8;
border-radius: 3px;
overflow: hidden;
}
.progress .progress-bar {
display: block;
height: 100%;
background: -webkit-gradient(linear, left top, right top, from(#ffd33d), color-stop(17%, #ea4aaa), color-stop(34%, #b34bff), color-stop(51%, #01feff), color-stop(68%, #ffd33d), color-stop(85%, #ea4aaa), to(#b34bff));
background: linear-gradient(90deg, #ffd33d, #ea4aaa 17%, #b34bff 34%, #01feff 51%, #ffd33d 68%, #ea4aaa 85%, #b34bff);
background-size: 300% 100%;
-webkit-animation: progress-animation 2s linear infinite;
animation: progress-animation 2s linear infinite;
}
@-webkit-keyframes progress-animation {
0% {
background-position: 100%;
}
100% {
background-position: 0;
}
}
@keyframes progress-animation {
0% {
background-position: 100%;
}
100% {
background-position: 0;
}
}
温馨提示：
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：duhaomu@163.com，我们将第一时间处理！
2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持。
3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读网站声明。
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：duhaomu@163.com，我们将第一时间处理！
2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持。
3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读网站声明。
