ColorUI/demo/pages/basics/progress/progress.wxml

<custom style="height:{{CustomBar}}px;">
  <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
      <text class='icon-back'></text> 进度条
    </navigator>
  </bar>
</custom>
<bar class="solid-bottom">
  <view class='action'>
    <text class='icon-title text-blue'></text>进度条形状
  </view>
</bar>
<view class="padding bg-white">
  <progress-bar>
    <view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
  </progress-bar>
  <progress-bar class="radius margin-top">
    <view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
  </progress-bar>
  <progress-bar class="round margin-top">
    <view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
  </progress-bar>
</view>
<bar class="solid-bottom margin-top">
  <view class='action'>
    <text class='icon-title text-blue'></text>进度条尺寸
  </view>
</bar>
<view class="padding bg-white">
  <progress-bar class="round">
    <view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
  </progress-bar>
  <progress-bar class="round margin-top sm">
    <view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
  </progress-bar>
  <progress-bar class="round margin-top xs">
    <view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
  </progress-bar>
</view>

<bar class="solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
  <view class='action'>
    <text class='icon-title text-blue'></text>进度条颜色
  </view>
  <view class='action'>
    <view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
  </view>
</bar>
<view class="padding {{color=='white'?'bg-grey':'bg-white'}}">
  <progress-bar class="round">
    <view class='bg-{{color}}' style="width:{{loading?'61.8%':''}};"></view>
  </progress-bar>
</view>


<bar class="solid-bottom margin-top">
  <view class='action'>
    <text class='icon-title text-blue'></text>进度条条纹
  </view>
  <switch class='sm margin-right-sm' bindchange='SetActive'></switch>
</bar>
<view class="padding bg-white">
  <progress-bar class="round sm striped {{active?'active':''}}">
    <view class='bg-green' style="width:{{loading?'60%':''}};"></view>
  </progress-bar>
  <progress-bar class="round sm margin-top-sm striped {{active?'active':''}}">
    <view class='bg-black' style="width:{{loading?'40%':''}};"></view>
  </progress-bar>
</view>
<bar class="solid-bottom margin-top">
  <view class='action'>
    <text class='icon-title text-blue'></text>进度条比例
  </view>
</bar>
<view class="padding bg-white">
  <progress-bar class="radius striped active">
    <view class='bg-red' style="width:{{loading?'30%':''}};">30%</view>
    <view class='bg-olive' style="width:{{loading?'45%':''}};">45%</view>
    <view class='bg-cyan' style="width:{{loading?'25%':''}};">25%</view>
  </progress-bar>
</view>
<bar class="solid-bottom margin-top">
  <view class='action'>
    <text class='icon-title text-blue'></text>进度条布局
  </view>
</bar>
<view class="padding bg-white ">
  <view class='flex'>
    <progress-bar class="round">
      <view class='bg-green' style="width:{{loading?'100%':''}};"></view>
    </progress-bar>
    <text class='icon-roundcheckfill text-green margin-left-sm'></text>
  </view>
  <view class='flex margin-top'>
    <progress-bar class="round">
      <view class='bg-green' style="width:{{loading?'80%':''}};"></view>
    </progress-bar>
    <text class='margin-left'>80%</text>
  </view>
</view>

<modal-box class="{{modalName=='ColorModal'?'show':''}}">
  <dialog>
    <bar class="justify-end">
      <view class='content'>选择颜色</view>
      <view class='action' bindtap='hideModal'>
        <text class='icon-close text-red'></text>
      </view>
    </bar>
    <view class='grid col-5 padding'>
      <view class='padding-xs' wx:for="{{ColorList}}" wx:key bindtap='SetColor' data-color='{{item.name}}' wx:if="{{item.name!='gray'}}">
        <view class='padding-tb bg-{{item.name}} radius'> {{item.title}} </view>
      </view>
    </view>
  </dialog>
</modal-box>