html代码:
<div class="progressbox">
<div style="width: 50%;" class="progressbar"></div>
</div>
JS代码如下:
.progressbox {
border-style: none;
border-radius: 10px;
height: 6px;
width: 100%;
background-color: #ededed;
}
.progressbar {
background-color: var(--theme, #13c2c2);
border-radius: 100px;
height: 6px;
transition: all 0.8s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
}
.progressbar::before {
height: 6px;
border-radius: 100px;
animation: progress 2.4s infinite cubic-bezier(0.23, 1, 0.32, 1);
content: "";
display: block;
}
@keyframes progress {
from {
width: 0%;
background: rgba(255, 255, 255, 0.4);
}
to {
width: 100%;
background: rgba(255, 255, 255, 0.1);
}
}
效果: