使用layui组件库制作进度条

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <!-- 引入 layui 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
</head>
<body>

    <button id="start-button" class="layui-btn">启动进度条</button>

    <div class="layui-progress layui-progress-big" lay-showPercent="true">
        <div class="layui-progress-bar layui-bg-green" lay-percent="0%" id="progress-bar"></div>
    </div>

    <!-- 引入 layui 的 JS 文件 -->
    <script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>
    <script>
        layui.use(['jquery', 'element'], function(){
            var $ = layui.jquery;
            var element = layui.element;
            var progress = $('.layui-progress-bar');
            var percent = 0;
            var timer;
            // 假设每50毫秒更新一次，总共16秒
            //可以按照自己的需求更改进度条的时间
            var step = (100 / 16) * 0.05; 
            $('#start-button').on('click', function(){
                timer = setInterval(function(){
                    percent+=step;
                    if (percent >= 100) {
                        clearInterval(timer);
                        percent = 100
                        //$('.progress-container').css('display', 'none');
                    }
                    progress.css('width', percent + '%');
                    progress.attr('lay-percent', percent.toFixed(2) + '%');
                    element.init();
                    element.progress('demo', percent.toFixed(2) + '%');
                }, 50);
            });
        });
    </script>
</body>
</html>