008-进度条
1. 進度條可應用于許多業務場景, 如任務完成進度、loading等等, 是一種較為直觀的表達元素。
2. 進度條依賴加載組件: element。
3. 進度條使用
| 名稱 | 組合 |
| 進度條容器 | class="layui-progress" |
| 進度條 | class="layui-progress-bar" |
4. 進度條尺寸和百分比
4.1. 進度條提供了兩種尺寸及多種顏色的顯示風格, 其中顏色的選值可參考背景色公共類。當對元素設置了class為layui-progress-big時, 即為大尺寸的進度條風格。
4.2. 通過對父級元素設置屬性lay-showPercent="yes"來開啟進度比的文本顯示, 支持: 普通數字、百分數、分數。
4.3. 屬性lay-percent: 代表進度條的初始百分比。默認風格的進度條的百分比如果開啟, 會在右上角顯示, 而大號進度條則會在內部顯示。
<div class="layui-progress"><div class="layui-progress-bar" lay-percent="10%"></div> </div><div class="layui-progress" lay-showPercent="true"><div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div> </div><div class="layui-progress" lay-showPercent="true"><div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div> </div><div class="layui-progress layui-progress-big" lay-showPercent="true"><div class="layui-progress-bar layui-bg-cyan" lay-percent="100px"></div> </div>5. 例子
5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>進度條 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><div class="layui-progress"><div class="layui-progress-bar" lay-percent="10%"></div></div><br /><br /><div class="layui-progress" lay-showPercent="true"><div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div></div><br /><br /><div class="layui-progress" lay-showPercent="true"><div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div></div><br /><br /><div class="layui-progress layui-progress-big" lay-showPercent="true"><div class="layui-progress-bar layui-bg-cyan" lay-percent="100px"></div></div><br /><br /><div class="layui-progress layui-progress-big" lay-showPercent="true"><div class="layui-progress-bar layui-bg-blue" lay-percent="100%"></div></div><br /><br /><div class="layui-progress layui-progress-big" lay-showPercent="true"><div class="layui-progress-bar layui-bg-green" lay-percent="1/2"></div></div><script type="text/javascript">layui.use('element', function(){var element = layui.element;});</script></body> </html>5.2. 效果圖
總結
