進度
進度指示器通常稱為旋轉器，表示未指定的等待時間或顯示流程的長度。
進度指示器通知使用者正在進行的流程狀態，例如載入應用程式、提交表單或儲存更新。
- 確定性指示器顯示操作需要多長時間。
- 非確定性指示器視覺化未指定的等待時間。
組件的動畫盡可能依賴 CSS，即使在 JavaScript 載入之前也能運作。
按下 Enter 開始編輯
按下 Enter 開始編輯
按下 Enter 開始編輯
按下 Enter 開始編輯
10%
按下 Enter 開始編輯
按下 Enter 開始編輯
按下 Enter 開始編輯
按下 Enter 開始編輯
按下 Enter 開始編輯
10%
按下 Enter 開始編輯
非標準範圍
進度組件接受 0 - 100 範圍內的值。這簡化了螢幕閱讀器使用者的操作，因為這些是預設的最小值/最大值。但是，有時您可能會使用值超出此範圍的資料來源。以下說明如何輕鬆地將任何範圍內的值轉換為 0 - 100 的比例
// MIN = Minimum expected value
// MAX = Maximum expected value
// Function to normalise the values (MIN / MAX could be integrated)
const normalise = (value) => ((value - MIN) * 100) / (MAX - MIN);
// Example component that utilizes the `normalise` function at the point of render.
function Progress(props) {
return (
<React.Fragment>
<CircularProgress variant="determinate" value={normalise(props.value)} />
<LinearProgress variant="determinate" value={normalise(props.value)} />
</React.Fragment>
);
}
自訂
以下是一些自訂組件的範例。您可以在覆寫文件頁面中了解更多相關資訊。
延遲顯示
關於回應時間，有3 個重要的限制需要了解。ButtonBase 組件的漣漪效應確保使用者感覺 UI 立即做出反應。通常，在延遲超過 0.1 秒但少於 1.0 秒的情況下，不需要特殊的回饋。在 1.0 秒後，您可以顯示載入器，以保持使用者思緒的連貫性。
限制
高 CPU 負載
在高負載下，您可能會遺失筆劃虛線動畫或看到隨機的 CircularProgress 環寬。您應該在 Web Worker 中或批次執行處理器密集型操作，以避免封鎖主渲染執行緒。
如果無法做到這一點，您可以利用 disableShrink 屬性來減輕此問題。請參閱此問題。
按下 Enter 開始編輯
高頻率更新
LinearProgress 在 CSS transform 屬性上使用轉換，以在不同值之間提供平滑的更新。預設轉換持續時間為 200 毫秒。如果父組件太快更新 value 屬性，您至少會在重新渲染和進度列完全更新之間體驗到 200 毫秒的延遲。
如果您需要每秒執行 30 次或更多次重新渲染，我們建議停用轉換
.MuiLinearProgress-bar {
transition: none;
}