可以利用两个相互嵌套的 <div> 元素来构建进度条，只需为内部的 <code><div> 设置背景色，即可直观呈现进度效果。如果对 <a style="color:#f60; text-decoration:underline;" title="html" href="https://m.php.cn/zt/15763.html" target="_blank">html</a> 和 css 编写不够熟练，建议直接使用 layui 框架提供的进度条组件——它已封装好样式与逻辑，开箱即用，省去手动编写繁杂 css 的步骤，大幅提升开发效率。<p>1、首先，在页面中引入 Layui 所需的 CSS 样式文件和 JavaScript 脚本文件。</p>
<p><img src="https://img.php.cn/upload/article/001/246/273/179150543174794.jpg?x-oss-process=image/resize,p_40" alt="HTML简单创建进度条"></p>
<p>2、在页面加载完成后，需初始化 Layui 的 element 模块，并调用其 <code>render() 方法，以激活所有相关组件。
3、此处借助 jQuery 的 $(document).ready() 方法，确保 DOM 结构完全加载完毕后再执行渲染操作。
4、在 HTML 中添加一对嵌套的 <div> 标签，并为其指定 Layui 对应的类名：外层 <code><div> 作为进度条容器，内层 <code><div> 则代表当前已完成部分（即带颜色的填充区域）。<p><img src="https://img.php.cn/upload/article/001/246/273/179150543149114.jpg?x-oss-process=image/resize,p_40" alt="HTML简单创建进度条"></p>
<p>5、刷新页面后，一个简洁美观的进度条将自动展示出来。</p>
<p><img src="https://img.php.cn/upload/article/001/246/273/179150543188474.jpg?x-oss-process=image/resize,p_40" alt="HTML简单创建进度条"></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>6、如需修改进度条主色调，仅需替换内层 <code><div> 的背景色类名即可。例如将 <code>layui-bg-red 改为 layui-bg-green，颜色便会由红色切换为绿色；Layui 内置了多种常用英文色值类名，支持快速切换。
7、通过设置 lay-percent 属性，可精确控制进度条当前完成比例，例如设为 70 表示显示 70% 的填充进度。
8、再次刷新页面，可见进度条不仅颜色已更新，填充长度也准确反映为 70%。
9、若希望在进度条右侧同步显示具体百分比数字，只需在外层 <div> 中添加 <code>lay-showPercent 属性即可。
10、重新打开页面，仅需几处简单配置，即可获得功能完整、视觉清晰的进度条效果。
