<view class="page">
    <view class="page__hd">
        <view class="page__title">Progress</view>
        <view class="page__desc">进度条</view>
    </view>
    <view class="page__bd page__bd_spacing">
        <view class="sub-title">Status</view>
        <wux-progress status="normal" percent="50" />
        <wux-white-space />
        <wux-progress status="progress" percent="50" />
        <wux-white-space />
        <wux-progress status="error" percent="50" />
        <wux-white-space />
        <wux-progress status="success" percent="50" />
        <view class="sub-title">ActiveColor</view>
        <wux-progress active-color="#11c1f3" percent="50" />
        <wux-white-space />
        <wux-progress active-color="#ffc900" percent="50" />
        <wux-white-space />
        <wux-progress active-color="#886aea" percent="50" />
        <view class="sub-title">BackgroundColor</view>
        <wux-progress background-color="#fff" percent="25" />
        <wux-white-space />
        <wux-progress background-color="#f3f3f3" percent="50" />
        <wux-white-space />
        <wux-progress background-color="#f8f8f8" percent="75" />
        <view class="sub-title">Shape</view>
        <wux-progress shape="square" percent="25" />
        <wux-white-space />
        <wux-progress shape="square" percent="50" />
        <wux-white-space />
        <wux-progress shape="square" percent="75" />
        <view class="sub-title">BarStyle</view>
        <wux-progress bar-style="background-color: #5cb85c" percent="25" />
        <wux-white-space />
        <wux-progress bar-style="background-color: #5bc0de" percent="50" />
        <wux-white-space />
        <wux-progress bar-style="background-color: #f0ad4e" percent="75" />
        <view class="sub-title">StrokeWidth</view>
        <wux-progress stroke-width="8" percent="25" />
        <wux-white-space />
        <wux-progress stroke-width="10" percent="50" />
        <wux-white-space />
        <wux-progress stroke-width="12" percent="75" />
        <view class="sub-title">ShowInfo</view>
        <wux-progress show-info percent="{{ percent }}" />
        <wux-progress show-info percent="{{ percent }}" />
        <wux-progress show-info percent="{{ percent }}" />
        <wux-button block type="light" bind:click="add">Add</wux-button>
    </view>
</view>