Consider rendering static and dynamic rendering progress bar in both cases.
<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="yes">
<div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
</div>Individual code above, the value of the progress bar is not displayed.
(1) Static rendering
The progress bar component dependent element, if not introduced, the progress bar will not be displayed.
layui.use('element', function () {
var element = layui.element;
});At this time, the progress bar display is as follows:
(2) dynamic rendering
When the need to dynamically change the progress value of the progress bar, layui official website says, element module provides element.progress () method basis.
First set the progress bar filter (lay-filter = "demo"), then the method needs to be performed only at a certain event or statement can dynamically change the value of the precision article. But the percentage of text displayed precision strip, users need their own change.
element.progress('demo', '80%');At this time, the progress bar value changes:
