进度条

展示您的进度。一种将进度条添加到布局的简单方法。您只需要两个 HTML 元素即可创建它们，并且它们易于自定义。

基础知识

进度条有两个元素：容器 .progress 和指示器 .progress-meter。代码示例中的 role 和 aria- 属性阐明了进度条的状态

aria-valuemin：最小值。
aria-valuemax：最大值。
aria-valuenow：当前值。

如果进度条的值不是数字，还要添加属性 aria-valuetext，它应该包含进度条值的易读版本。

<div class="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-meter"></div>
</div>

为内部指示器添加 width CSS 属性以填充进度条。

<div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100">
  <div class="progress-meter" style="width: 50%"></div>
</div>

颜色

可以使用 .secondary、.success、.warning 和 .alert 颜色来设置进度条的样式。

在视频中观看此部分

<div class="secondary progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
  <div class="progress-meter" style="width: 25%"></div>
</div>

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

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

<div class="alert progress">
  <div class="progress-meter" style="width: 75%"></div>
</div>

带文本

您可以在进度条的指示器内添加文本。确保您在指示器中使用的文本也用于 aria-valuetext 属性中。

在视频中观看此部分

<div class="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
  <span class="progress-meter" style="width: 25%">
    <span class="progress-meter-text">25%</span>
  </span>
</div>

25%

原生进度条

作为自定义进度条样式的替代方法，您也可以选择使用原生的 <progress> 元素。它提供了一种更简洁的方式来创建进度条，但它在 IE9 和其他一些旧版浏览器中不受支持。查看 <progress> 元素支持。

<progress max="100" value="75"></progress>

如果您使用的是 Foundation 的 Sass 版本，请将此行添加到您的主 Sass 文件中以导出 <progress> CSS

@include foundation-progress-element;

<progress> 元素可以使用相同的颜色类进行样式设置：.secondary、.success、.warning 和 .alert。

<progress class="secondary" max="100" value="75"></progress>
<progress class="success" max="100" value="75"></progress>
<progress class="warning" max="100" value="75"></progress>
<progress class="alert" max="100" value="75"></progress>

原生指示器

对于那些喜欢冒险的开发者，我们还为 <meter> 元素提供了样式。有什么区别？ <progress> 表示随时间变化的值，例如存储容量。 <meter> 表示围绕某个最佳值波动的值。它在 Internet Explorer、Mobile Safari 或 Android 2 中也*不支持*。查看 <meter> 元素支持。

如果您使用的是 Foundation 的 Sass 版本，请将此行添加到您的主 Sass 文件中以导出 <meter> CSS

@include foundation-meter-element;

指示器会根据当前值以及定义的低、中和高范围自动着色。详细了解 <meter> 值的机制。

<meter value="30" min="0" low="33" high="66" optimum="100" max="100"></meter>
<meter value="50" min="0" low="33" high="66" optimum="100" max="100"></meter>
<meter value="100" min="0" low="33" high="66" optimum="100" max="100"></meter>

屏幕阅读器

在几个屏幕阅读器中使用不同的 aria-valuenow 值测试进度条。屏幕阅读器的行为可能并不总是很明显。

如果进度条的值是数字，请确保正确定义了范围（从 aria-valuemax 中提取 aria-valuemin 定义了完整范围）。对于百分比进度条 (0-100%)，值范围通常为 100 (aria-valuemin="0" 和 aria-valuemax="100")。大多数屏幕阅读器将使用以下公式根据这些数字计算宣布的百分比

aria-valuenow / (aria-valuemax - aria-valuemin) = announced percentage

Sass 参考

变量

可以使用项目设置文件中的这些 Sass 变量来自定义此组件的默认样式。

名称	类型	默认值	描述
`$meter-height`	长度	`1rem`	`<meter>` 元素的高度。
`$meter-radius`	长度	`$global-radius`	`<meter>` 元素的边框半径。
`$meter-background`	颜色	`$medium-gray`	`<meter>` 元素的背景颜色。
`$meter-fill-good`	颜色	`$success-color`	`<meter>` 元素中最佳值的指示器填充。
`$meter-fill-medium`	颜色	`$warning-color`	`<meter>` 元素中平均值的指示器填充。
`$meter-fill-bad`	颜色	`$alert-color`	`<meter>` 元素中次优值的指示器填充。
`$progress-height`	数字	`1rem`	进度条的高度。
`$progress-background`	颜色	`$medium-gray`	进度条的背景颜色。
`$progress-margin-bottom`	数字	`$global-margin`	进度条的下边距。
`$progress-meter-background`	颜色	`$primary-color`	进度条指示器的默认颜色。
`$progress-radius`	数字	`$global-radius`	进度条的默认半径。

混合

我们使用这些混合来构建此组件的最终 CSS 输出。您可以自己使用这些混合来从我们的组件中构建自己的类结构。

progress-container

@include progress-container;

为进度条容器添加样式。

progress-meter

@include progress-meter;

为进度条的内部指示器添加样式。

progress-meter-text

@include progress-meter-text;

为进度指示器中的文本添加样式。