跳到内容跳到内容
🚀 影响 Joy UI 2025 年路线图！参与最新的开发者调查

环形进度条API

React 环形进度条组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

导入

import CircularProgress from '@mui/joy/CircularProgress';
// or
import { CircularProgress } from '@mui/joy';

阅读本指南，了解有关最小化 bundle 大小的差异。



ARIA

如果进度条描述页面特定区域的加载进度，则应使用 aria-describedby 指向进度条，并将该区域的 aria-busy 属性设置为 true，直到加载完成。

Props

原生组件的 Props 也可用。

名称类型默认值描述
color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		'primary'

组件的颜色。它支持那些对该组件有意义的主题颜色。

要了解如何添加自己的颜色，请查看主题组件—扩展颜色。

componentelementType-

用于根节点的组件。可以使用 HTML 元素的字符串或组件。

determinateboolfalse

选择变体的布尔值。当没有进度值时，请使用 indeterminate。

size'sm'
| 'md'
| 'lg'
| string		'md'

组件的尺寸。它接受 'sm' 和 'lg' 之间的主题值。

要了解如何向组件添加自定义尺寸，请查看主题组件—扩展尺寸。

slotProps{ progress?: func
| object, root?: func
| object, svg?: func
| object, track?: func
| object }		{}

用于内部每个 slot 的 props。

slots{ progress?: elementType, root?: elementType, svg?: elementType, track?: elementType }{}

用于内部每个 slot 的组件。

有关更多详细信息，请参见下面的Slots API。

sxArray<func
| object
| bool>
| func
| object		-

允许定义系统覆盖以及其他 CSS 样式的系统 prop。

有关更多详细信息，请参见 `sx` 页面。

thicknessnumber-

圆的粗细。

valuenumberdeterminate ? 0 : 25

determinate 变体的进度指示器的值。值介于 0 到 100 之间。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string		'soft'

要使用的全局变体。

要了解如何添加自己的变体，请查看主题组件—扩展变体。

ref 被转发到根元素。

主题默认 props

您可以使用 JoyCircularProgress 通过主题更改此组件的默认 props。

Slots

要了解如何自定义 slot，请查看覆盖组件结构指南。

Slot 名称类名默认组件描述
root.MuiCircularProgress-root'span'渲染 root 的组件。
svg.MuiCircularProgress-svg'svg'渲染 svg 的组件。
track.MuiCircularProgress-track'circle'渲染 track 的组件。
progress.MuiCircularProgress-progress'circle'渲染 progress 的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们将应用于组件的 slot。

类名规则名称描述
.MuiCircularProgress-colorContextcolorContext当颜色反转被触发时，应用于根元素的类名。
.MuiCircularProgress-colorDangercolorDanger如果 color="danger"，则应用于根元素的类名。
.MuiCircularProgress-colorNeutralcolorNeutral如果 color="neutral"，则应用于根元素的类名。
.MuiCircularProgress-colorPrimarycolorPrimary如果 color="primary"，则应用于根元素的类名。
.MuiCircularProgress-colorSuccesscolorSuccess如果 color="success"，则应用于根元素的类名。
.MuiCircularProgress-colorWarningcolorWarning如果 color="warning"，则应用于根元素的类名。
.MuiCircularProgress-determinatedeterminate如果 determinate 为 true，则应用于根元素的类名。
.MuiCircularProgress-sizeLgsizeLg如果 size="lg"，则应用于根元素的类名。
.MuiCircularProgress-sizeMdsizeMd如果 size="md"，则应用于根元素的类名。
.MuiCircularProgress-sizeSmsizeSm如果 size="sm"，则应用于根元素的类名。
.MuiCircularProgress-variantOutlinedvariantOutlined如果 variant="outlined"，则应用于根元素的类名。
.MuiCircularProgress-variantPlainvariantPlain如果 variant="plain"，则应用于根元素的类名。
.MuiCircularProgress-variantSoftvariantSoft如果 variant="soft"，则应用于根元素的类名。
.MuiCircularProgress-variantSolidvariantSolid如果 variant="solid"，则应用于根元素的类名。

您可以使用以下自定义选项之一覆盖组件的样式

源代码

如果您在此页面中找不到信息，请考虑查看组件的实现以获取更多详细信息。