跳转到内容
编辑此页面

Progress 进度条

Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process. The animation works with CSS, not JavaScript.

进度指示器能够将当前处理过程的状态通知用户，例如加载一个应用，提交一个表单或保存一些更新。 它们与应用程序状态进行通信并指示可用的操作，例如用户是否可从当前页面离开。

定量指示器显示一个操作消耗多长时间。

不定量指示器可视化了一个不确定的操作等待时间。

一组进度条

在显示一系列过程的进度时，与其显示每个单独活动的进度，进度条指示器会展示整体的过程。

环状进度条

Circular progress（环状进度条）同时支持了确定的和不确定的过程。

  • 定量环形指示器填充了不可见区域，指示器从0到360度推进，并用颜色来进行环形追踪。
  • 不定量环形指示器在沿着隐形的轨道移动时，随之变大变小。

不定量的环形进度条

<CircularProgress />
<CircularProgress color="secondary" />

交互集成

定量的环形进度条

<CircularProgress variant="determinate" value={progress} />
<CircularProgress variant="determinate" value={progress} color="secondary" />

静态的环形进度条

<CircularProgress variant="static" value={5} />
<CircularProgress variant="static" value={25} />
<CircularProgress variant="static" value={50} />
<CircularProgress variant="static" value={75} />
<CircularProgress variant="static" value={100} />
<CircularProgress variant="static" value={completed} />

线性进度条

线性进度条指示器.

不定量的线性进度条

<LinearProgress />
<LinearProgress color="secondary" />

定量的线性进度条

<LinearProgress variant="determinate" value={completed} />
<LinearProgress variant="determinate" value={completed} color="secondary" />

线性缓冲条

<LinearProgress variant="buffer" value={completed} valueBuffer={buffer} />
<LinearProgress variant="buffer" value={completed} valueBuffer={buffer} color="secondary" />

线性查询

<LinearProgress variant="query" />
<LinearProgress variant="query" color="secondary" />

非标准区间

进度条组件采用一个在0—100区间内的值。 作为默认的最小/最大值，屏幕阅读用户能够更便利地阅读。 但是有时，您可能会使用一些值超出这个范围的数据源。 通过这个例子，您可以轻松地将一个任意区间的值转换为0—100区间的值：

// MIN = 最小值
// MAX = 最大值
// 正常化值的函数（MIN / MAX 可相互协调）
const normalise = value => (value - MIN) * 100 / (MAX - MIN);

// 示例组件展示了在 render 函数中，利用`normalise`这个函数
function Progress(props) {
  return (
    <React.Fragment>
      <CircularProgress variant="determinate" value={normalise(props.value)} />
      <LinearProgress variant="determinate" value={normalise(props.value)} />
    </React.Fragment>
  )
}

自定义进度条

以下是自定义组件的一些例子。 您可以在重写文档页中了解有关此内容的更多信息。

延时的出现

关于的响应时间，您需要知道这3个重要的限制。 ButtonBase组件的波纹效果，能够保证用户体验到实时反馈的系统。 通常情况下，在大于0.1秒且小于1.0秒间的延时不需要给与特殊的反馈。 但是在1.0秒后，您可以显示一个加载器来保证用户的思考流程不被打断。

局限性

在加载的特别慢时，您可能丢失stroke dash的动画或看到环形进度会有一些半径随机的情况。 为了不阻碍主渲染进程，您应该在web worker中或批处理中运行密集操作的处理器。

高负载

When it's not possible, you can leverage the disableShrink property to mitigate the issue. See this issue.

<CircularProgress disableShrink />

API