ProgressBar 进度条

用法

import { ProgressBar, Label } from '@heroui/react';

组件结构

import { ProgressBar, Label } from '@heroui/react';

export default () => (
  <ProgressBar value={60}>
    <Label>Loading</Label>
    <ProgressBar.Output />
    <ProgressBar.Track>
      <ProgressBar.Fill />
    </ProgressBar.Track>
  </ProgressBar>
);

示例

尺寸

颜色

无可见标签

无需可见标签时，使用 aria-label 提供无障碍标签。

不确定进度

无法确定进度时使用 isIndeterminate。

自定义数值范围

使用 minValue、maxValue 与 formatOptions 自定义取值范围与显示格式。

自定义样式

Tailwind CSS

全局 CSS

若要自定义组件类，可使用 @layer components 指令。了解更多。

@layer components {
  .progress-bar {
    @apply w-full gap-2;
  }

  .progress-bar__track {
    @apply h-3 rounded-full;
  }

  .progress-bar__fill {
    @apply rounded-full;
  }
}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

ProgressBar 使用以下 CSS 类（查看源码样式）：

基础与元素类

• .progress-bar - 基础容器（网格布局）
• .progress-bar__output - 数值文本展示
• .progress-bar__track - 轨道背景
• .progress-bar__fill - 轨道上已填充部分

尺寸类

• .progress-bar--sm - 小尺寸变体（更细的轨道）
• .progress-bar--md - 中等尺寸变体（默认）
• .progress-bar--lg - 大尺寸变体（更粗的轨道）

颜色类

• .progress-bar--default - 默认颜色变体
• .progress-bar--accent - 强调色变体
• .progress-bar--success - 成功色变体
• .progress-bar--warning - 警告色变体
• .progress-bar--danger - 危险色变体

API 参考

ProgressBar

继承自 React Aria ProgressBar。

ProgressBarRenderProps

使用渲染 prop 模式时，会提供以下值：

相关组件