CSS 斜条纹进度条-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS 斜条纹进度条。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果：

CSS 斜条纹进度条,css,前端,javascript 文章来源地址https://www.toymoban.com/news/detail-703588.html

代码：

html:

<div class="active-line flex">
    <!-- lineWidth：灰色背景 -->
    <div class="bg-line">
        <div v-for="n in 30" class="gray"></div>
    </div>
    <div class="flex line-w">
        <!-- lineWidth：当前进度长度 -->
        <div class="line" :style="`width: ${lineWidth}px`"></div>
        <div class="round-dot" :style="lineWidth&&'width: 24upx'"></div>
    </div>
</div>

css：

.active-line {
    width: 420upx;
    height: 12upx;
    // background: #EEEEEE;
    border-radius: 10upx;
    margin: 42upx 0 0 40upx;
    position: relative;
    .line-w {
        position: absolute;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        .line {
            border-radius: 10upx 0 0 10upx;
            height: 12upx;
            background: linear-gradient(30deg, #565F6F 0%, #212538 100%);
        }
        .round-dot {
            height: 24upx;
            border-radius: 50%;
            background: #212538;
        }
    }
}
.flex {
    display: flex;
    align-items: center;
}
.bg-line {
    padding: 0 6upx;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 6upx;

    .gray {
        display: inline-block;
        flex-shrink: 0;
        height: 12upx;
        width: 12upx;
        background-color: #eee;
        transform: skewX(-45deg);
        margin: 0 2upx;
    }
}