基本上現在的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篇 就 加油 奧利給