[JavaScript知识库]使用css渐变色。实现动态进度条效果

基本上现在的ui框架都有自己的进度条组件封装 但是有的时候我们需要自己定制的时候 还是比较麻烦

比如下面的这个效果

双色进度条 贴合 效果。可能有点业务会用到吧

就是使用渐变色和 动画的效果实现, 第二个进度条动画延迟 一点就可以和第一个贴在一起了

animation-delay: .1s; 这个可能童鞋用的比较少
// 还有就是渐变色的描述
background-image: linear-gradient(45deg, #FF4B00 25%, transparent 25%, transparent 50%, #FF4B00 50%, #FF4B00 75%, transparent 75%);

.process {
            width: 100%;
            height: 20px;
            background-color: #000D23;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
        }
        .child, .child2 {
            width: 60%;
            height: 100%;
            background-image: linear-gradient(45deg, #FF4B00 25%, transparent 25%, transparent 50%, #FF4B00 50%, #FF4B00 75%, transparent 75%);
            background-size: 20px 20px;
            animation: process .6s infinite linear;
        }
        .child2 {
            width: 30%;
            background-image: linear-gradient(45deg, #FFCE00 25%, transparent 25%, transparent 50%, #FFCE00 50%, #FFCE00 75%, transparent 75%);
            animation: process .6s infinite linear;
            animation-delay: .1s;
        }
        @keyframes process {
            from {
                background-position: 20px 0
            }

            to {
                background-position: 0 0
            }
        }

<div class="process">
        <div class="child"></div>
        <div class="child2"></div>
    </div>

是不是就实现了呢。关注我。 持续更新前端知识 我的目标是写够1024篇 就 加油 奥利给

超强干货来袭

云风专访：近40年码龄，通宵达旦的技术人生