进度条的简单实现

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

效果: