跳到主要內容跳到主要內容
🚀 影響 Material UI 2025 年的發展藍圖！參與最新的開發者調查

CircularProgressAPI

React CircularProgress 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

示範

匯入

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

閱讀這份關於最小化套件大小的指南，以瞭解差異。



ARIA

如果進度條正在描述頁面特定區域的載入進度，您應該使用 aria-describedby 指向進度條，並將該區域的 aria-busy 屬性設定為 true，直到載入完成。

Props

原生元件的 Props 也可用。

名稱類型預設值描述
classesobject-

覆寫或擴充應用於元件的樣式。

請參閱下方CSS 類別 API 以取得更多詳細資訊。

color'inherit'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string		'primary'

元件的顏色。它支援預設和自訂主題顏色，這些顏色可以按照調色盤自訂指南中所示的方式新增。

disableShrinkboolfalse

如果為 true，則停用收縮動畫。這僅在 variant 為 indeterminate 時有效。

sizenumber
| string		40

元件的大小。如果使用數字，則假定為像素單位。如果使用字串，您需要提供 CSS 單位，例如 '3rem'。

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

系統屬性，允許定義系統覆寫以及其他 CSS 樣式。

請參閱 `sx` 頁面以取得更多詳細資訊。

thicknessnumber3.6

圓圈的粗細。

valuenumber0

determinate variant 的進度指示器值。值介於 0 到 100 之間。

variant'determinate'
| 'indeterminate'		'indeterminate'

要使用的 variant。當沒有進度值時，請使用 indeterminate。

ref 轉發到根元素。

主題預設 props

您可以使用 MuiCircularProgress 來變更此元件的預設 props 透過主題。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。它們在觸發特定狀態時應用於元件的插槽。

類別名稱規則名稱描述
.MuiCircularProgress-circlecircle應用於 circle svg 路徑的樣式。
.MuiCircularProgress-circleDeterminatecircleDeterminate如果 variant="determinate"，則應用於 circle svg 路徑的樣式。
.MuiCircularProgress-circleDisableShrinkcircleDisableShrink如果 disableShrink={true}，則應用於 circle svg 路徑的樣式。
.MuiCircularProgress-circleIndeterminatecircleIndeterminate如果 variant="indeterminate"，則應用於 circle svg 路徑的樣式。
.MuiCircularProgress-colorPrimarycolorPrimary如果 color="primary"，則應用於根元素的樣式。
.MuiCircularProgress-colorSecondarycolorSecondary如果 color="secondary"，則應用於根元素的樣式。
.MuiCircularProgress-determinatedeterminate如果 variant="determinate"，則應用於根元素的樣式。
.MuiCircularProgress-indeterminateindeterminate如果 variant="indeterminate"，則應用於根元素的樣式。
.MuiCircularProgress-rootroot應用於根元素的樣式。
.MuiCircularProgress-svgsvg應用於 svg 元素的樣式。

您可以使用以下其中一種自訂選項來覆寫元件的樣式

原始碼

如果您在本頁中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。