Introduction to progress bar rendering in layui

Consider two situations: static rendering and dynamic rendering of progress bars.

 <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>

With the above code alone, the progress bar value cannot be displayed.

(1) Static rendering

The progress bar depends on the element component. If it is not introduced, the progress bar will not be displayed.

layui.use('element', function () {
    var element = layui.element;
});

At this time, the progress bar displays the following results:

(2) Dynamic rendering

When you need to dynamically change the progress value of the progress bar , layui official website says that the element module provides the basic method of element.progress().

First set the progress bar filter (lay-filter="demo"), and then you only need to execute this method in an event or statement to dynamically change the precision bar value. But for the percentage text displayed in the accuracy bar, users need to change it themselves.

element.progress('demo', '80%');

At this time the progress bar value changes:

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of Introduction to progress bar rendering in layui. For more information, please follow other related articles on the PHP Chinese website!