微信小程序进度条Progress

// 现在的话就是讲解我门的微信小程序进度条的基础：

然后的户就是在我们的微信wxml中编写我们的相关的网页文件的代码：

<!-- 现在的话就是设置我们的微信小程序的进度条控件 -->
<view class="peogress-precent">
   我们的微信小程序的进度条控件使用的是porecent百分比。
</view>
<view class="progress-box">
   <!-- 在我们的这个位置的话就是设置我么的相关的width -->
   <progress percent="20" show-info stroke-width="3" ></progress>
   <!-- 
   
       percent 表示的是百分比
       show-info 表示的是将百分比显示在进度条的右侧
       stroke-width : 表示的进度条的宽度
    -->
</view>
<view>
   <progress active percent="60" stroke-width="3" show-info></progress>
   <!-- 
      active : 表示的是我们的进度条从我们的左边往右边的动画
    -->
</view>
<view class="progress-box">
  <progress percent="80" show-info  activeColor="#000000" active duration ></progress>
  <!-- 
     duration  : 表示的是进度条增加百分之1，所需要的毫秒数。
     activeColor：已经选择的进度条的颜色
   -->
</view>

<view class="progress-box">
  <progress percent="80" color="#10AEFF" active stroke-width="3" />
  <!-- 
     color : 表示的是我们的进度条的颜色
   -->
</view>

效果如图所示：