使用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>
示例图片
结语
代码只有前端，还不能够和后端进行联动（还在探索中）。希望可以帮助到你。
