进度条

用于展示操作进度、当前状态和预期。

百分比外显(顶部)

.vus-progress-inner类中添加v--text="100%"属性作为百分比文字。

<div class="vus-progress">
   <div class="vus-progress-bar">
      <div class="vus-progress-inner" v--text="55.55%" style="width: 55.55%;"></div>
   </div>
</div>

百分比外显(右侧)

添加.progress-right类,使百分比文字右侧显示。 (注:在.vus-progress-bar类中添加v--text="100%"属性作为百分比文字。)

<div class="vus-progress progress-right">
   <div class="vus-progress-bar" v--text="99.99%">
      <div class="vus-progress-inner" style="width: 99.99%;"></div>
   </div>
</div>

百分比内显

添加.progress-inside类,使百分比文字内部显示。

<div class="vus-progress progress-inside">
   <div class="vus-progress-bar">
      <div class="vus-progress-inner" v--text="55.55%" style="width: 55.55%;"></div>
   </div>
</div>

条纹与动画

  • .vus-progress-inner类添加下例类使其带条纹和动画效果。
  • .progress-striped:条纹效果。
  • .progress-anim:使条纹带动画效果。
条纹效果
动画条纹效果
<!-- 条纹效果 -->
<div class="vus-progress">
   <div class="vus-progress-bar">
      <div class="vus-progress-inner progress-striped" v--text="55.55%" style="width: 55.55%;"></div>
   </div>
</div>

<!-- 动画条纹效果 -->
<div class="vus-progress">
   <div class="vus-progress-bar">
      <div class="vus-progress-inner progress-striped progress-anim" v--text="55.55%" style="width: 55.55%;"></div>
   </div>
</div>

圆角

添加.progress-radius类设置为圆角进度条。

<div class="vus-progress progress-radius">
   <div class="vus-progress-bar">
      <div class="vus-progress-inner" v--text="55.55%" style="width: 55.55%;"></div>
   </div>
</div>

颜色

.vus-progress-inner类中添加指定背景颜色,请参阅背景颜色API文档。

<div class="vus-progress">
   <div class="vus-progress-bar">
      <div class="vus-progress-inner vus-bg--primary" v--text="55.55%" style="width: 55.55%;"></div>
   </div>
</div>
<div class="vus-progress progress-right">
   <div class="vus-progress-bar">
      <div class="vus-progress-inner vus-bg--noble" v--text="55.55%" style="width: 55.55%;"></div>
   </div>
</div>
<div class="vus-progress progress-inside">
   <div class="vus-progress-bar">
      <div class="vus-progress-inner vus-bg--danger" v--text="55.55%" style="width: 55.55%;"></div>
   </div>
</div>