layui架構學習（12：進度條）

  進度條是應用系統中的常見元素，無論是上傳檔案、下載下傳檔案、加載内容時都會顯示進度條，Layui支援設定線條形進度條的樣式，同時支援通過element子產品動态操作進度條。

  進度條樣式分為兩級結構，頂層一般為div元素，其class中添加預設類layui-progress，下級一般也是用div元素，其class添加預設類layui-progress-bar，同時使用lay-percent設定目前的進度值，可以為百分比，也可以是分數形式，屬性lay-showPercent設定是否顯示進度值。使用示例及效果如下所示：

<div class="layui-progress " style="width: 400px;margin-top: 100px;" lay-showPercent="true">		  
  <div class="layui-progress-bar" lay-percent="1/2"></div>
</div>
           

  上述示例中進度條尺寸為正常尺寸，如果要顯示進度值的話，進度值顯示在進度條上方。Layui支援在頂層元素的class中額外增加預設類layui-progress-big，即可增大進度條尺寸，此時進度值顯示在進度條内部。使用示例及效果如下所示：

<div class="layui-progress layui-progress-big" style="width: 400px;margin-top: 100px;" lay-showPercent="true">		  
  <div class="layui-progress-bar" lay-percent="1/2"></div>
</div>
           

  進度條預設為綠色，如果需要調整進度條顔色，可以在二級div元素中額外增加背景色預設類（也可以直接設定background-color屬性值）。使用示例及效果如下所示

<div class="layui-progress layui-progress-big" style="width: 400px;margin-top: 100px;" lay-showPercent="true">		  
  <div class="layui-progress-bar layui-bg-red" lay-percent="1/2"></div>
</div>
           

  element子產品中element.progress(filter, percent)函數能動态設定進度條進度值，第一個參數指定要改變進度值的進度條頂層元素的lay-filter值，第二個參數為要調整的進度值，使用示例如下所示：

<button type="button" class="layui-btn  layui-btn-sm">調整進度值</button>
	<div class="layui-progress layui-progress-big" lay-filter="test" style="width: 400px;margin-top: 10px;background-color: aqua;color: blue;" lay-showPercent="true">		  
	  <div class="layui-progress-bar" style="background-color:darkred" lay-percent="1/3"></div>
	</div>
	<script>
		layui.use('element', function(){
		  var $ = layui.jquery
		  ,element = layui.element;
		  
		  $('.layui-btn').on('click', function(){
		      element.progress('test', '50%')
		    });
		  }
		  )
	</script>
           

  layui.css中與進度條相關的預設類還有layui-progress-tex，但沒有在layui官網教程中看到其用法，暫時不清楚該怎麼用。

參考文獻：

[1]B站：layui架構精講全套視訊教程

[2]https://layui.gitee.io/v2/docs/

[3]https://layui.gitee.io/v2/demo/

[4]https://github.com/layui/layui/