DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/demo/element/progress.vue

<template>
  <view>
    <l-title>进度条形状：</l-title>
    <view class="padding bg-white">
      <l-progress :percent="50" color="red" noText radius />
      <l-progress :percent="20" color="red" />
      <l-progress percent="87.5" color="red" round />
    </view>
    <l-demo-description>
      进度条使用 l-progress 标签，设置 percent 属性来表示进度百分比(无需百分号)； 
      添加 radius 属性则成为圆角进度条，添加 round 则成为胶囊型进度条，添加 noText 属性则不显示百分数
    </l-demo-description>

    <l-title>进度条尺寸/颜色：</l-title>
    <view class="padding bg-white">
      <l-progress percent="50" color="red" noText round />
      <l-progress percent="50" size="sm" color="blue" noText round />
      <l-progress percent="50" size="xs" color="green" noText round />
    </view>
    <l-demo-description>
      添加属性 size="*" 即可改变进度条尺寸，小尺寸为sm，特小尺寸为xs； 
      添加属性 color="*" 即可设置进度条颜色，把*替换成颜色英文名即可
    </l-demo-description>

    <l-title>进度条条纹：</l-title>
    <view class="padding bg-white">
      <l-progress percent="50" color="red" round striped />
      <l-progress percent="50" color="blue" round striped />
      <l-progress percent="70" color="red" round striped active />
      <l-progress percent="70" color="blue" round striped active />
    </view>
    <l-demo-description>添加 striped 属性即可显示条纹，再添加 active 属性即可显示动态条纹</l-demo-description>
  </view>
</template>