Foundation 进度条（Progress Bar） - Foundation教程

一、进度条概述

进度条用于展示程序处理进度、任务完成度或加载状态。

在 <div> 元素中使用 .progress 类创建进度条容器，内部使用 .meter 类（通常配合 <span>）表示实际进度。通过 style="width:xx%" 控制进度百分比。

二、基础进度条

<div class="progress">
  <span class="meter" style="width:50%"></span>
</div>Code language: HTML, XML (xml)

三、进度条颜色变体

默认进度条为蓝色，可使用以下类修改颜色：

类名	说明
`.progress`	默认蓝色
`.secondary`	灰色
`.success`	绿色
`.alert`	红色

<div class="progress">
    <span class="meter" style="width:50%"></span>
</div>

<div class="progress secondary">
    <span class="meter" style="width:50%"></span>
</div>

<div class="progress success">
    <span class="meter" style="width:50%"></span>
</div>

<div class="progress alert">
    <span class="meter" style="width:50%"></span>
</div>Code language: HTML, XML (xml)

四、圆角进度条

使用 .radius 和 .round 类为进度条添加圆角效果：

<div class="progress">
    <span class="meter" style="width:50%"></span>
</div>

<div class="progress radius">
    <span class="meter" style="width:50%"></span>
</div>

<div class="progress round">
    <span class="meter" style="width:50%"></span>
</div>Code language: HTML, XML (xml)

五、进度条宽度控制

使用 .small-num 或 .large-num 类修改进度条的宽度（基于 12 列栅格），num 取值范围为 1–12：

1 ≈ 8.33%
12 = 100%（默认）

<div class="progress large-1">
    <span class="meter" style="width:50%"></span>
</div>

<div class="progress large-6">
    <span class="meter" style="width:50%"></span>
</div>

<div class="progress large-9">
    <span class="meter" style="width:50%"></span>
</div>

<div class="progress large-11">
    <span class="meter" style="width:50%"></span>
</div>

<!-- Default width -->
<div class="progress large-12">
    <span class="meter" style="width:50%"></span>
</div>Code language: HTML, XML (xml)

六、带百分比标签的进度条

通过 CSS 定位，可以在进度条内部显示百分比文字：

<style>
    .percentage {
        position: absolute;
        top: 50%;
        left: 50%;
        color: white;
        transform: translate(-50%, -50%);
        font-size: 12px;
    }
</style>

<div class="progress">
    <span class="meter" style="position:relative;width:75%">
        <span class="percentage">75%</span>
    </span>
</div>

<div class="progress success">
    <span class="meter" style="position:relative;width:50%">
        <span class="percentage">50%</span>
    </span>
</div>

<div class="progress alert">
    <span class="meter" style="position:relative;width:25%">
        <span class="percentage">25%</span>
    </span>
</div>Code language: HTML, XML (xml)

七、完整可运行示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Foundation 进度条示例</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
    <script src="foundation-5.5.3/js/vendor/jquery.js"></script>
    <script src="foundation-5.5.3/js/foundation.min.js"></script>
    <script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
    <style>
        .progress {
            margin-bottom: 15px;
        }
        .percentage {
            position: absolute;
            top: 50%;
            left: 50%;
            color: white;
            transform: translate(-50%, -50%);
            font-size: 12px;
        }
    </style>
</head>
<body>

<div class="row">
    <div class="medium-12 columns">

        <h3>基础进度条</h3>
        <div class="progress">
            <span class="meter" style="width:50%"></span>
        </div>

        <h3>颜色变体</h3>
        <div class="progress">
            <span class="meter" style="width:50%"></span>
        </div>
        <div class="progress secondary">
            <span class="meter" style="width:50%"></span>
        </div>
        <div class="progress success">
            <span class="meter" style="width:50%"></span>
        </div>
        <div class="progress alert">
            <span class="meter" style="width:50%"></span>
        </div>

        <hr />

        <h3>圆角进度条</h3>
        <div class="progress">
            <span class="meter" style="width:50%"></span>
        </div>
        <div class="progress radius">
            <span class="meter" style="width:50%"></span>
        </div>
        <div class="progress round">
            <span class="meter" style="width:50%"></span>
        </div>

        <hr />

        <h3>宽度控制</h3>
        <div class="progress large-1">
            <span class="meter" style="width:50%"></span>
        </div>
        <div class="progress large-6">
            <span class="meter" style="width:50%"></span>
        </div>
        <div class="progress large-9">
            <span class="meter" style="width:50%"></span>
        </div>
        <div class="progress large-11">
            <span class="meter" style="width:50%"></span>
        </div>
        <div class="progress large-12">
            <span class="meter" style="width:50%"></span>
        </div>

        <hr />

        <h3>带百分比标签</h3>
        <div class="progress">
            <span class="meter" style="position:relative;width:75%">
                <span class="percentage">75%</span>
            </span>
        </div>
        <div class="progress success">
            <span class="meter" style="position:relative;width:50%">
                <span class="percentage">50%</span>
            </span>
        </div>
        <div class="progress alert">
            <span class="meter" style="position:relative;width:25%">
                <span class="percentage">25%</span>
            </span>
        </div>

    </div>
</div>

</body>
</html>Code language: HTML, XML (xml)

八、使用要点小结

功能	实现方式
创建进度条	`.progress` 容器 + `.meter` 子元素
设置进度	`style="width:xx%"` 写在 `.meter` 上
颜色变体	`.secondary` `.success` `.alert`
圆角	`.radius` `.round`
宽度控制	`.large-1` 到 `.large-12`（基于栅格）
百分比文字	在 `.meter` 内添加绝对定位的 `<span>`

Previous: Foundation 提醒框（Alert Box）

Next: Foundation 面板（Panel）