进度条
进度指示器，通常称为加载动画，表示未指定的等待时间或显示进程的长度。
进度指示器告知用户正在进行中的进程状态，例如加载应用、提交表单或保存更新。
- 确定性指示器显示操作将花费多长时间。
- 不确定性指示器可视化未指定的等待时间。
组件的动画尽可能依赖 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;
}