線性進度

線性進度指示器，俗稱載入器，表示未指定的等待時間或顯示程序的長度。

簡介

進度指示器告知使用者正在進行的程序的狀態，例如載入應用程式、提交表單或儲存更新。

LinearProgress 預設為不確定模式，表示未指定的等待時間。若要使其確實表示操作將花費的時間，請使用確定模式。

組件的動畫盡可能依賴 CSS，即使在 JavaScript 載入之前也能運作。

組件

在安裝後，您可以使用以下基本元素開始建構此組件

import LinearProgress from '@mui/joy/LinearProgress';

export default function MyApp() {
  return <LinearProgress />;
}

變體

線性進度組件支援四種全域變體：solid、soft (預設)、outlined 和 plain。

顏色

主題中包含的每個調色盤都可透過 color 屬性使用。試試看組合不同的顏色。

尺寸

線性進度組件預設提供三種尺寸：sm、md (預設) 和 lg。

確定模式

如果您想指示指定的等待時間，可以使用 determinate 屬性。

粗細

提供數字給 thickness 屬性以控制進度條的筆劃寬度。

第三方整合

use-count-up

使用 use-count-up 套件，您可以透過提供 start、end 和 duration 值來建立計數動畫。

CSS 變數遊樂場

試試看調整組件上可用的所有 CSS 變數，看看設計如何變化。

您可以使用這些變數在 sx 屬性和主題中自訂組件。

常見範例

帶有標籤

API

請參閱以下文件，以完整參考此處提及的組件可用的所有屬性和類別。

• <LinearProgress />