Foundation 进度条详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把进度条讲得明明白白，你直接复制粘贴就能用！
1. 基本结构（Foundation 6 及以上都用这个写法）
<div class="progress" role="progressbar" tabindex="0" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-meter" style="width: 50%"></div>
</div>→ 宽度用 style=”width: xx%” 或者用 class 控制（下面会教）
2. 颜色变体（最常用、最好看）
<div class="progress primary">
<div class="progress-meter" style="width: 30%">30%</div>
</div>
<div class="progress secondary">
<div class="progress-meter" style="width: 60%">60%</div>
</div>
<div class="progress success">
<div class="progress-meter" style="width: 80%">80%</div>
</div>
<div class="progress warning">
<div class="progress-meter" style="width: 45%">45%</div>
</div>
<div class="progress alert">
<div class="progress-meter" style="width: 95%">95%</div>
</div>3. 带文字的进度条（你最想要的写法）
<div class="progress success">
<span class="progress-meter" style="width: 75%">
<p class="progress-meter-text">75% 已完成</p>
</span>
</div>
<div class="progress warning">
<span class="progress-meter" style="width: 40%">
<p class="progress-meter-text">40% 上传中...</p>
</span>
</div>4. 带条纹 + 动画（超级炫酷，面试加分项）
<!-- 条纹 -->
<div class="progress success">
<div class="progress-meter striped" style="width: 65%"></div>
</div>
<!-- 动画（加载中专用） -->
<div class="progress primary">
<div class="progress-meter animated" style="width: 100%"></div>
</div>5. 小尺寸 + 大尺寸
<div class="progress small success">
<div class="progress-meter" style="width: 90%"></div>
</div>
<div class="progress large alert">
<div class="progress-meter" style="width: 20%">20%</div>
</div>6. 圆角 + 完全自定义（你想要多漂亮就多漂亮）
<div class="progress round success">
<div class="progress-meter" style="width: 88%">88%</div>
</div>7. 今天直接给你抄的完整代码（复制粘贴就出效果）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
</head>
<body>
<h3>Foundation 进度条详解 - 一次全看懂</h3>
<div class="progress primary"><div class="progress-meter" style="width:30%">Primary 30%</div></div>
<div class="progress success"><div class="progress-meter" style="width:75%"><p class="progress-meter-text">Success 75%</p></div></div>
<div class="progress warning"><div class="progress-meter striped" style="width:50%">Warning 50%</div></div>
<div class="progress alert"><div class="progress-meter animated" style="width:95%">Alert 95%</div></div>
<div class="progress small round secondary"><div class="progress-meter" style="width:88%">Small Round 88%</div></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="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% 下载中”
“给我一个组件文件”
我马上给你写！
