css 进度条

实现效果

完整代码实现

1、html部分

---

下面展示一些 DOM结构。

// An highlighted block
<div class="xui-wrapper xui-myPromption-wrapper">
     <div class="xui-mainContain pt10 bg_fff">
          <div class="xui-returnCommission">
               <div class="xui-process">
                    <i id="icon-flag" class="xui-icon-flag"></i>
                    <div class="xui-process-static"></div>
                    <div id="process-bar" class="xui-process-active"></div>
                </div>
          </div>
     </div>
 </div>

2、css部分

---

下面展示一些 css样式处理。

一些碎碎念：
进度条效果实现拆分：

• 一段背景；
• 一小段的静态的斜纹进度条；
• 斜纹进度条用线性渐变 linear-gradient 类实现
  最基础的渐变实现：
  1、角度
  2、关键点（包含2个参数，1是颜色，2是长度位置）
  静态的斜纹进度条的样式：
  linear-gradient(60deg, transparent 0, transparent 0.8rem, #4dafe2 0.8rem, #4dafe2 1.6rem, transparent 1.6rem, transparent 2.4rem, #4dafe2 2.4rem);

// An highlighted block
      .bg_fff {
   
          /*background-color: #fff;*/
      }