写在前面

这个系列只是用于记录自己过去写过的代码,避免自己重复做无用功

这个是什么

这个玩意只是对于ant design中进度条的原生实现

贴出代码

HTML部分

<div class="progressbox">
    <div style="width: 50%;" class="progressbar"></div>
</div>

css部分

.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);
    }
}

结果展示