progressbar进度条设置为圆角 进度条样式

前言

一个好看的进度条会给用户更棒的操作体验，但是我搜索网上的进度条样式，并没有找到符合需求的进度条，为什么呢？ 网上的进度条太粗，究其根本是linear-geadient在捣鬼。

普通进度条

一个普通进度条包括外边框、内边框、进度条和百分比框。以及它需要实现的动效，比如进度条需要从0开始增长，百分比框要随着进度条联动。

html：

// 外边框：宽，高，内边距，背景颜色，圆角
<div class="progress"> 
// 内边框：宽度，高度，边框border（宽度width、样式solid、颜色color、圆角border-radius），背景颜色
    <div class="progress-shadow">  
    // progress-bar（进度条基本样式）：高度（宽度不需要），圆角（需与内边框圆角一致），阴影
    // progress-bar-striped（进度条条纹样式）：
       背景颜色：background: linear-gradient(45deg, #f0c105 25%, #ffcd05 25%, #ffcd05 50%, #f0c105 50%, #f0c105 75%, #ffcd05 75%, #ffcd05);
       背景图片的尺寸：background-size: 40px 40px
    // progress-bar.active（进度条动画）：
animation: ani1 0.8s linear infinite reverse;
        <div class="progress-bar progress-bar-striped active" style="width: 0%;">
            <div class="progress-value sp">0%</div>
        </div>        
    </div>
</div>
复制代码

animation:

@keyframes ani1{
    from {    background-position: 40px 0;   }
    to {    background-position: 0 0;   }
}
复制代码

了解了进度条的结构组成，层层嵌套并赋予class相应的样式后，一个进度条就出来了。虽然你看着很简单，但是调进度条条纹样式的时候真的非常折腾人，我这里分了 3段(25%、50%、75%)，但是修改角度后整个图形会变得面目全非。在linear-gradient中，angle和percent之间存在某种关系；并且我这只是非常简单的分成3段，导致的结果就是进度条条纹还是太粗。

repeating-linear-gradient——密集进度条条纹样式的不二法门，密集恐惧症的苦口良药

只需要修改progress-bar-striped（进度条条纹样式）：
@getRem: 16rem
背景颜色：background: repeating-linear-gradient(135deg,
                                    #f0c105, // 条纹颜色
                                    #f0c105 3.2/@getRem, // 条纹所占比例，这里是整个条纹的50%，既一半
                                    #ffcd05 0, //  条纹底色
                                    #ffcd05 6.4/@getRem );
背景图片的大小：background-size: 40px 40px；
复制代码

如果你想要再密一点，那么就这么做

background: repeating-linear-gradient(135deg,
                                    #f0c105, // 条纹颜色
                                    #f0c105 1.2/@getRem, // 条纹所占比例，这里是整个条纹的50%，既一半
                                    #ffcd05 0, //  条纹底色
                                    #ffcd05 2.4/@getRem );
background-size: 40px 40px；
复制代码

发现区别了么，就是把条纹底色的长度改为上面的一般，条纹颜色的长度 = 条纹底色/2