进度条 proress


进度条可应用于许多业务场景,如任务完成进度、loading等等,是一种较为直观的表达元素。
badge类型按钮演示
标准
20%
位置
20%
大小
色彩
20%
边框
20%
条形
20%
动态
20%
边框动态
20%
垂直v
底部progress-bottom
标准 <div class="progress"><div class="progress-bar progress-animate" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div>
位置 <div class="progress"><div class="progress-bar progress-animate f-r" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div>
大小 <div class="progress progress-1"><div class="progress-bar bg-blue progress-animate" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div>
色彩 <div class="progress"><div class="progress-bar bg-orange progress-animate" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div>
边框 <div class="progress progress-bordered"><div class="progress-bar bg-orange progress-animate" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div>
条形 <div class="progress progress-striped"><div class="progress-bar progress-animate" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div>
动态 <div class="progress progress-striped active"><div class="progress-bar progress-animate" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div>
边框动态 <div class="progress progress-bordered progress-striped active"><div class="progress-bar progress-animate" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div>
 
      
标题
      <div class='progress v'><div class='progress-bar bg-blue progress-animatev'></div></div>
      <div class='progress v progress-bottom'><div class='progress-bar bg-blue progress-animatev'></div></div>