Skip to content
Lenso UI

ProgressCircle 环形进度条

环形进度指示器，用于展示确定或不确定的进度。

用法

import { ProgressCircle } from '@lenso/ui';

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";
import { ProgressCircle } from "@lenso/ui";
export function Basic() {  return (    <ProgressCircle aria-label="Loading" value={60}>      <ProgressCircle.Track>        <ProgressCircle.TrackCircle />        <ProgressCircle.FillCircle />      </ProgressCircle.Track>    </ProgressCircle>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

组件结构

import { ProgressCircle } from '@lenso/ui';
export default () => (  <ProgressCircle aria-label="Loading" value={60}>    <ProgressCircle.Track>      <ProgressCircle.TrackCircle />      <ProgressCircle.FillCircle />    </ProgressCircle.Track>  </ProgressCircle>);

示例

尺寸

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { ProgressCircle } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ row: { display: "flex", alignItems: "center", gap: 24 } });export function Sizes() {  return (    <div {...stylex.props(styles.row)}>      {(        [          ["sm", 40],          ["md", 60],          ["lg", 80],        ] as const      ).map(([size, value]) => (        <ProgressCircle key={size} aria-label="Loading" size={size} value={value}>          <ProgressCircle.Track>            <ProgressCircle.TrackCircle />            <ProgressCircle.FillCircle />          </ProgressCircle.Track>        </ProgressCircle>      ))}    </div>  );}export default Sizes;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

颜色

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { ProgressCircle } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ row: { display: "flex", alignItems: "center", gap: 24 } });export function Colors() {  return (    <div {...stylex.props(styles.row)}>      {(["default", "accent", "success", "warning", "danger"] as const).map((color) => (        <ProgressCircle key={color} aria-label={color} color={color} value={60}>          <ProgressCircle.Track>            <ProgressCircle.TrackCircle />            <ProgressCircle.FillCircle />          </ProgressCircle.Track>        </ProgressCircle>      ))}    </div>  );}export default Colors;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

不确定进度

无法确定进度时使用 isIndeterminate。

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0); null is Base UI's indeterminate value.import { ProgressCircle } from "@lenso/ui";export function Indeterminate() {  return (    <ProgressCircle aria-label="Loading" value={null}>      <ProgressCircle.Track>        <ProgressCircle.TrackCircle />        <ProgressCircle.FillCircle />      </ProgressCircle.Track>    </ProgressCircle>  );}export default Indeterminate;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

带标签

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0); the label belongs to the progress context.import { ProgressCircle } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ row: { display: "flex", alignItems: "center", gap: 12 } });export function WithLabel() {  return (    <ProgressCircle xstyle={styles.row} value={75}>      <ProgressCircle.Track>        <ProgressCircle.TrackCircle />        <ProgressCircle.FillCircle />      </ProgressCircle.Track>      <ProgressCircle.Label>75% Complete</ProgressCircle.Label>    </ProgressCircle>  );}export default WithLabel;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义 SVG 属性

各子部分均为可组合组件，可直接覆盖 strokeWidth、r、cx、cy、viewBox 等 SVG 属性。

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { ProgressCircle } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ row: { display: "flex", alignItems: "flex-end", gap: 24 } });export function CustomSvg() {  return (    <div {...stylex.props(styles.row)}>      <ProgressCircle aria-label="Thin circle" value={60}>        <ProgressCircle.Track strokeWidth={2} viewBox="0 0 36 36">          <ProgressCircle.TrackCircle cx={18} cy={18} r={17} strokeWidth={2} />          <ProgressCircle.FillCircle cx={18} cy={18} r={17} strokeWidth={2} />        </ProgressCircle.Track>      </ProgressCircle>      <ProgressCircle aria-label="Default circle" value={60}>        <ProgressCircle.Track>          <ProgressCircle.TrackCircle />          <ProgressCircle.FillCircle />        </ProgressCircle.Track>      </ProgressCircle>      <ProgressCircle aria-label="Thick circle" value={60}>        <ProgressCircle.Track strokeWidth={6} viewBox="0 0 36 36">          <ProgressCircle.TrackCircle cx={18} cy={18} r={15} strokeWidth={6} />          <ProgressCircle.FillCircle cx={18} cy={18} r={15} strokeWidth={6} />        </ProgressCircle.Track>      </ProgressCircle>    </div>  );}export default CustomSvg;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义样式

Tailwind CSS

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { ProgressCircle } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  track: { width: 56, height: 56 },  background: { stroke: "light-dark(oklch(92.2% 0 0), oklch(26.9% 0 0))" },  fill: { stroke: "light-dark(oklch(37.1% 0 0), oklch(87% 0 0))" },});export function CustomStyles() {  return (    <ProgressCircle aria-label="Sync progress" value={68}>      <ProgressCircle.Track xstyle={styles.track}>        <ProgressCircle.TrackCircle xstyle={styles.background} />        <ProgressCircle.FillCircle xstyle={styles.fill} strokeLinecap="round" />      </ProgressCircle.Track>    </ProgressCircle>  );}export default CustomStyles;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

全局 CSS

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

@layer components {  .progress-circle {    @apply inline-flex;  }
  .progress-circle__track {    @apply size-12;  }
  .progress-circle__fill-circle {    stroke: purple;  }}

样式参考

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

CSS 类

ProgressCircle 组件使用以下 CSS 类（查看源码样式）：

基础与元素类 [!toc]

  • .progress-circle - 基础容器
  • .progress-circle__track - SVG 元素
  • .progress-circle__track-circle - 背景圆环
  • .progress-circle__fill-circle - 进度弧

尺寸类 [!toc]

  • .progress-circle--sm - 小尺寸
  • .progress-circle--md - 中等尺寸（默认）
  • .progress-circle--lg - 大尺寸

颜色类 [!toc]

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

API 参考

ProgressCircle

继承自 React Aria ProgressBar。

Prop类型默认值描述
valuenumber0当前值
minValuenumber0最小值
maxValuenumber100最大值
isIndeterminatebooleanfalse是否为不确定进度
size"sm" | "md" | "lg""md"圆环尺寸
color"default" | "accent" | "success" | "warning" | "danger""accent"进度弧颜色
formatOptionsIntl.NumberFormatOptions{style: 'percent'}数值展示格式
childrenReactNode | (values: ProgressBarRenderProps) => ReactNode-内容或渲染 prop

ProgressBarRenderProps

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

Prop类型描述
percentagenumber进度百分比（0–100）
valueTextstring格式化后的数值文案
isIndeterminateboolean是否为不确定进度

相关组件