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

LinearProgressAPI

React LinearProgress 組件的 API 參考文件。了解此導出模組的 props、CSS 和其他 API。

示範

Import

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

閱讀這份關於最小化 bundle size 的指南，以了解差異。



ARIA

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

Props

原生組件的 props 也可使用。

名稱類型預設值描述
classesobject-

覆寫或擴展應用於組件的樣式。

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

color'inherit'
| 'primary'
| 'secondary'
| string		'primary'

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

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

系統屬性，允許定義系統覆寫以及額外的 CSS 樣式。

請參閱 `sx` 頁面 以了解更多詳細資訊。

valuenumber-

用於 determinate 和 buffer 變體的進度指示器值。值介於 0 到 100 之間。

valueBuffernumber-

用於 buffer 變體的值。值介於 0 到 100 之間。

variant'buffer'
| 'determinate'
| 'indeterminate'
| 'query'		'indeterminate'

要使用的變體。當沒有進度值時，請使用 indeterminate 或 query。

ref 被轉發到根元素。

主題預設 props

您可以使用 MuiLinearProgress 透過主題更改此組件的預設 props。

CSS 類別

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

類別名稱規則名稱描述
.MuiLinearProgress-barbar應用於分層 bar1 和 bar2 元素的樣式。
.MuiLinearProgress-bar1bar1應用於 bar1 元素的樣式。
.MuiLinearProgress-bar1Bufferbar1Buffer如果 variant="buffer"，則應用於 bar1 元素的樣式。
.MuiLinearProgress-bar1Determinatebar1Determinate如果 variant="determinate"，則應用於 bar1 元素的樣式。
.MuiLinearProgress-bar1Indeterminatebar1Indeterminate如果 variant="indeterminate or query"，則應用於 bar1 元素的樣式。
.MuiLinearProgress-bar2bar2應用於 bar2 元素的樣式。
.MuiLinearProgress-bar2Bufferbar2Buffer如果 variant="buffer"，則應用於 bar2 元素的樣式。
.MuiLinearProgress-bar2Indeterminatebar2Indeterminate如果 variant="indeterminate or query"，則應用於 bar2 元素的樣式。
.MuiLinearProgress-barColorPrimarybarColorPrimary如果 color="primary"，則應用於 bar 元素的樣式；如果 variant 不是 "buffer"，則應用於 bar2。
.MuiLinearProgress-barColorSecondarybarColorSecondary如果 color="secondary"，則應用於 bar 元素的樣式；如果 variant 不是 "buffer"，則應用於 bar2。
.MuiLinearProgress-bufferbuffer如果 variant="buffer"，則應用於根元素的樣式。
.MuiLinearProgress-colorPrimarycolorPrimary如果 color="primary"，則應用於根元素和 bar2 元素的樣式；如果 variant="buffer"，則應用於 bar2。
.MuiLinearProgress-colorSecondarycolorSecondary如果 color="secondary"，則應用於根元素和 bar2 元素的樣式；如果 variant="buffer"，則應用於 bar2。
.MuiLinearProgress-dasheddashed如果 variant="buffer"，則應用於額外 bar 元素的樣式。
.MuiLinearProgress-dashedColorPrimarydashedColorPrimary如果 variant="buffer" 且 color="primary"，則應用於額外 bar 元素的樣式。
.MuiLinearProgress-dashedColorSecondarydashedColorSecondary如果 variant="buffer" 且 color="secondary"，則應用於額外 bar 元素的樣式。
.MuiLinearProgress-determinatedeterminate如果 variant="determinate"，則應用於根元素的樣式。
.MuiLinearProgress-indeterminateindeterminate如果 variant="indeterminate"，則應用於根元素的樣式。
.MuiLinearProgress-queryquery如果 variant="query"，則應用於根元素的樣式。
.MuiLinearProgress-rootroot應用於根元素的樣式。

您可以使用以下自訂選項之一覆寫組件的樣式

原始碼

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