Semantic-UI Progress 进度内容

简介

Semantic-UI Progress 是一种可定制的进度条组件，可以用于显示当前任务或操作的完成度。它可以在不同的方向（水平或垂直）和尺寸上进行配置，具有多种不同的样式和动画效果。

快速开始

要使用 Semantic-UI Progress，您需要在页面上添加 Semantic-UI 样式表和脚本。您可以从官方网站（https://semantic-ui.com）下载最新版本的 Semantic-UI。

然后，将以下 HTML 代码添加到页面中：

<div class="ui progress">
  <div class="bar" style="width: 60%;">
    <div class="progress"></div>
  </div>
</div>

这将创建一个默认的水平进度条，已完成 60%。

您可以使用以下 JavaScript 代码初始化进度条：

$('.ui.progress').progress();

此时，您应该能够在页面上看到一个水平进度条。

配置选项

Semantic-UI Progress 可以自定义多种选项，以满足您的需求。以下是一些常用的选项：

| 选项 | 描述 | | -------------- | ------------------------------------------------------------------------------------------- | | value | 进度值。默认为 0。 | | total | 进度的最大值。默认为 100。 | | showActivity | 是否显示活动指示器。默认为 true。 | | autoSuccess | 当进度达到 100% 时，是否自动将进度条标记为成功。默认为 false。 | | text | 进度条上显示的文本。它可以包含变量（参见下文）。 | | label | 进度条上显示的标签。它可以包含变量（参见下文）。 | | labelDirection | 标签的位置。可以是 'left'、'right'、'top' 或 'bottom'。默认为 'top'。 | | precision | 显示数值时要使用的十进制位数。默认为 0。 | | duration | 每次更新进度条的持续时间（单位：毫秒）。默认为 200。 | | easing | 动画效果。可以是 'linear'、'ease'、'ease-in'、'ease-out' 或 'ease-in-out'。默认为 'ease'。 |

您可以在初始化时使用这些选项，例如：

$('.ui.progress').progress({
  value: 60,
  total: 100,
  label: '{value}%',
  labelDirection: 'left',
  easing: 'ease-in-out'
});

变量

在模板字符串（例如 text 和 label）中使用特殊变量，可以使其动态显示当前进度。以下是一些已知的变量：

| 变量 | 描述 | | ------ | ----------------------------------------- | | {value}| 当前进度值。例如，60。 | | {total}| 进度的最大值。例如，100。 | | {percent}| 当前进度的百分比。例如，60%。 | | {barWidth}| 进度条的宽度（像素）。例如，200px。 | | {elapsed}| 已用时间（毫秒）。例如，3000。 | | {duration}| 每次更新进度条的持续时间（毫秒）。例如，200。 |

注意，每个变量都应该使用花括号括起来，而不是使用 $ 符号。在样式字符串中引用变量时，您可以选择在样式名之前或之后使用它们。

样式类

Semantic-UI Progress 提供了多种样式类，以帮助您自定义外观。以下是一些常用的样式类：

| 样式类 | 描述 | | ------ | ---------------------------------- | | ui progress| 创建一个进度条。 | | success| 标记进度条为成功（已完成）。 | | warning| 标记进度条为警告（存在问题）。 | | error| 标记进度条为错误（终止）。 | | disabled| 禁用进度条。 | | indicating| 正在指示一些活动（使用活动指示器）。 | | inverted| 反色显示进度条。 |

您可以使用这些样式类来自定义进度条的颜色、形状和布局。例如：

<div class="ui yellow progress">
  <div class="bar" style="width: 60%;">
    <div class="progress"></div>
  </div>
</div>

这将创建一个黄色的进度条，已完成 60%。

动画效果

Semantic-UI Progress 提供了多种动画效果，以充实显示效果。以下是一些常用的动画效果：

| 动画效果 | 描述 | | -------- | ----------------------------| | fade | 渐隐渐显 | | slide | 滑动效果 | | zoom | 像素增减的缩放 | | rotate | 逆时针旋转的角度 | | drop | 垂直方向下落 | | swing | 左右摆动 | | flash | 闪烁效果 | | pulse | 脉冲 | | heartbeat| 心跳或闪烁脉冲 |

您可以使用 animation 选项来设置动画效果。例如：

$('.ui.progress').progress({
  value: 60,
  total: 100,
  animation: 'pulse'
});

此时，进度条将使用“脉冲”动画效果，即以周期性的脉动闪烁。

结尾

Semantic-UI Progress 是一个简单但功能强大的进度条组件，可用于显示任何任务或进度操作的完成度。使用本指南，您已了解了许多配置选项、样式类和动画效果，以便按需自定义您的进度条。把它放在您的网站上，看看它如何提高体验！