Why can't the layui progress bar be rendered?

Foreword:

layui progress bar rendering is divided into two situations, namely: static rendering and dynamic rendering.

 <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;
});

The progress bar displays the result as follows:

(Learning video sharing: html video tutorial)

(2) Dynamic rendering

When you need to dynamically change the progress value of the progress bar, the layui official website says that the element module provides the basic method 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:

Related recommendations: layui tutorial

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