Why can't my layui progress bar be rendered?

The solution is as follows:

Tips: You need to consider both static rendering and dynamic rendering of progress bars.

(Related recommendations: layui framework)

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

The progress bar value cannot be displayed in the above code alone.

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

The above is the detailed content of Why can't my layui progress bar be rendered?. For more information, please follow other related articles on the PHP Chinese website!