直流电机测速与 PWM 调速 FPGA 设计 VHDL Quartus
2026/6/7 15:02:56
Foundation 进度条详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把进度条讲得明明白白，你直接复制粘贴就能用！
1. 基本结构（Foundation 6 及以上都用这个写法）
<divclass="progress"role="progressbar"tabindex="0"aria-valuenow="50"aria-valuemin="0"aria-valuemax="100"><divclass="progress-meter"style="width:50%"></div></div>→ 宽度用 style=“width: xx%” 或者用 class 控制（下面会教）
2. 颜色变体（最常用、最好看）
<divclass="progress primary"><divclass="progress-meter"style="width:30%">30%</div></div><divclass="progress secondary"><divclass="progress-meter"style="width:60%">60%</div></div><divclass="progress success"><divclass="progress-meter"style="width:80%">80%</div></div><divclass="progress warning"><divclass="progress-meter"style="width:45%">45%</div></div><divclass="progress alert"><divclass="progress-meter"style="width:95%">95%</div></div>3. 带文字的进度条（你最想要的写法）
<divclass="progress success"><spanclass="progress-meter"style="width:75%"><pclass="progress-meter-text">75% 已完成</p></span></div><divclass="progress warning"><spanclass="progress-meter"style="width:40%"><pclass="progress-meter-text">40% 上传中...</p></span></div>4. 带条纹 + 动画（超级炫酷，面试加分项）
<!-- 条纹 --><divclass="progress success"><divclass="progress-meter striped"style="width:65%"></div></div><!-- 动画（加载中专用） --><divclass="progress primary"><divclass="progress-meter animated"style="width:100%"></div></div>5. 小尺寸 + 大尺寸
<divclass="progress small success"><divclass="progress-meter"style="width:90%"></div></div><divclass="progress large alert"><divclass="progress-meter"style="width:20%">20%</div></div>6. 圆角 + 完全自定义（你想要多漂亮就多漂亮）
<divclass="progress round success"><divclass="progress-meter"style="width:88%">88%</div></div>7. 今天直接给你抄的完整代码（复制粘贴就出效果）
<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css"></head><body><h3>Foundation 进度条详解 - 一次全看懂</h3><divclass="progress primary"><divclass="progress-meter"style="width:30%">Primary 30%</div></div><divclass="progress success"><divclass="progress-meter"style="width:75%"><pclass="progress-meter-text">Success 75%</p></div></div><divclass="progress warning"><divclass="progress-meter striped"style="width:50%">Warning 50%</div></div><divclass="progress alert"><divclass="progress-meter animated"style="width:95%">Alert 95%</div></div><divclass="progress small round secondary"><divclass="progress-meter"style="width:88%">Small Round 88%</div></div><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script><script>$(document).foundation();</script></body></html>下面给你看效果（我帮你找的最像 Foundation 风格的图）：
官方文档（永远最新）：https://get.foundation/sites/docs/progress-bar.html
你现在想做什么？
→ 明天要不要继续讲 Foundation 滑块（Slider）？
→ 还是把上面代码改成你项目里的样子（告诉我颜色、百分比、文字，我立刻给你写好）？
→ 或者你想把这5个进度条直接做成一个组件文件发给你？
告诉我下一句：
“明天讲 slider”
“帮我改成绿色 66% 下载中”
“给我一个组件文件”
我马上给你写！