Progress

Progress indicators express an unspecified wait time or display the length of a process.

Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen.

Determinate indicators display how long an operation will take.

Indeterminate indicators visualize an unspecified wait time.

Progress as a Group

When displaying progress for a sequence of processes, indicate overall progress rather than the progress of each activity.

Circular Progress

Circular progress support both determinate and indeterminate processes.

Determinate circular indicators fill the invisible, circular track with color, as the indicator moves from 0 to 360 degrees.
Indeterminate circular indicators grow and shrink in size while moving along the invisible track.

Circular Indeterminate

<>
  <CircularProgress margin={{ right: 2 }} />
  <CircularProgress color="secondary" />
</>

<>
  <CircularProgress margin={{ right: 2 }} />
  <CircularProgress color="secondary" />
</>

Circular Determinate

class CircularDeterminate extends React.Component {
  constructor(props) {
    super(props);

    this.progress = this.progress.bind(this);

    this.state = {
      completed: 0,
    };
  }

  componentDidMount() {
    this.timer = setInterval(this.progress, 20);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  progress() {
    this.setState({ completed: this.state.completed >= 100 ? 0 : this.state.completed + 1 });
  }

  render() {
    return (
      <div>
        <CircularProgress margin={2} variant="determinate" value={this.state.completed} />
        <CircularProgress
          margin={2}
          variant="determinate"
          value={this.state.completed}
          color="secondary"
        />
      </div>
    );
  }
}

class CircularDeterminate extends React.Component {
  constructor(props) {
    super(props);

    this.progress = this.progress.bind(this);

    this.state = {
      completed: 0,
    };
  }

  componentDidMount() {
    this.timer = setInterval(this.progress, 20);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  progress() {
    this.setState({ completed: this.state.completed >= 100 ? 0 : this.state.completed + 1 });
  }

  render() {
    return (
      <div>
        <CircularProgress margin={2} variant="determinate" value={this.state.completed} />
        <CircularProgress
          margin={2}
          variant="determinate"
          value={this.state.completed}
          color="secondary"
        />
      </div>
    );
  }
}

Circular Static

class CircularStatic extends React.Component {
  constructor(props) {
    super(props);

    this.progress = this.progress.bind(this);

    this.state = {
      completed: 0,
    };
  }

  componentDidMount() {
    this.timer = setInterval(this.progress, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  progress() {
    this.setState({ completed: this.state.completed >= 100 ? 0 : this.state.completed + 10 });
  }

  render() {
    return (
      <div>
        <CircularProgress margin={2} variant="static" value={5} />
        <CircularProgress margin={2} variant="static" value={25} />
        <CircularProgress margin={2} variant="static" value={50} />
        <CircularProgress margin={2} variant="static" value={75} />
        <CircularProgress margin={2} variant="static" value={100} />
        <CircularProgress margin={2} variant="static" value={this.state.completed} />
      </div>
    );
  }
}

class CircularStatic extends React.Component {
  constructor(props) {
    super(props);

    this.progress = this.progress.bind(this);

    this.state = {
      completed: 0,
    };
  }

  componentDidMount() {
    this.timer = setInterval(this.progress, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  progress() {
    this.setState({ completed: this.state.completed >= 100 ? 0 : this.state.completed + 10 });
  }

  render() {
    return (
      <div>
        <CircularProgress margin={2} variant="static" value={5} />
        <CircularProgress margin={2} variant="static" value={25} />
        <CircularProgress margin={2} variant="static" value={50} />
        <CircularProgress margin={2} variant="static" value={75} />
        <CircularProgress margin={2} variant="static" value={100} />
        <CircularProgress margin={2} variant="static" value={this.state.completed} />
      </div>
    );
  }
}

Interactive Integration

class CircularIntegration extends React.Component {
  constructor(props) {
    super(props);

    this.handleButtonClick = this.handleButtonClick.bind(this);

    this.state = {
      loading: false,
      success: false,
    };
  }

  componentWillUnmount() {
    clearTimeout(this.timer);
  }

  handleButtonClick() {
    if (!this.state.loading) {
      this.setState(
        {
          success: false,
          loading: true,
        },
        () => {
          this.timer = setTimeout(() => {
            this.setState({
              loading: false,
              success: true,
            });
          }, 2000);
        },
      );
    }
  }

  render() {
    return (
      <Grid container justify="center" alignItems="center">
        <Grid item xs="auto" style={{ position: 'relative' }} margin={{ right: 2 }}>
          <Fab color="primary" onClick={this.handleButtonClick}>
            {this.state.success ? <Check /> : <Save />}
          </Fab>
          {this.state.loading && (
            <CircularProgress
              size={68}
              style={{
                position: 'absolute',
                top: -6,
                left: -6,
                zIndex: 1,
              }}
            />
          )}
        </Grid>
        <Grid item xs="auto" style={{ position: 'relative' }}>
          <Button disabled={this.state.loading} onClick={this.handleButtonClick}>
            Accept terms
          </Button>
          {this.state.loading && (
            <CircularProgress
              size={24}
              style={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                marginTop: -12,
                marginLeft: -12,
              }}
            />
          )}
        </Grid>
      </Grid>
    );
  }
}

class CircularIntegration extends React.Component {
  constructor(props) {
    super(props);

    this.handleButtonClick = this.handleButtonClick.bind(this);

    this.state = {
      loading: false,
      success: false,
    };
  }

  componentWillUnmount() {
    clearTimeout(this.timer);
  }

  handleButtonClick() {
    if (!this.state.loading) {
      this.setState(
        {
          success: false,
          loading: true,
        },
        () => {
          this.timer = setTimeout(() => {
            this.setState({
              loading: false,
              success: true,
            });
          }, 2000);
        },
      );
    }
  }

  render() {
    return (
      <Grid container justify="center" alignItems="center">
        <Grid item xs="auto" style={{ position: 'relative' }} margin={{ right: 2 }}>
          <Fab color="primary" onClick={this.handleButtonClick}>
            {this.state.success ? <Check /> : <Save />}
          </Fab>
          {this.state.loading && (
            <CircularProgress
              size={68}
              style={{
                position: 'absolute',
                top: -6,
                left: -6,
                zIndex: 1,
              }}
            />
          )}
        </Grid>
        <Grid item xs="auto" style={{ position: 'relative' }}>
          <Button disabled={this.state.loading} onClick={this.handleButtonClick}>
            Accept terms
          </Button>
          {this.state.loading && (
            <CircularProgress
              size={24}
              style={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                marginTop: -12,
                marginLeft: -12,
              }}
            />
          )}
        </Grid>
      </Grid>
    );
  }
}

Linear Progress

Linear progress indicators.

Linear Indeterminate

<>
  <LinearProgress margin={{ bottom: 3 }} />
  <LinearProgress color="secondary" />
</>

<>
  <LinearProgress margin={{ bottom: 3 }} />
  <LinearProgress color="secondary" />
</>

Linear Determinate

class CircularDeterminate extends React.Component {
  constructor(props) {
    super(props);

    this.progress = this.progress.bind(this);

    this.state = {
      completed: 0,
    };
  }

  componentDidMount() {
    this.timer = setInterval(this.progress, 500);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  progress() {
    if (this.state.completed === 100) {
      this.setState({ completed: 0 });
    } else {
      const diff = Math.random() * 10;
      this.setState({ completed: Math.min(this.state.completed + diff, 100) });
    }
  }

  render() {
    return (
      <div>
        <LinearProgress variant="determinate" value={this.state.completed} margin={{ bottom: 3 }} />
        <LinearProgress variant="determinate" value={this.state.completed} color="secondary" />
      </div>
    );
  }
}

class CircularDeterminate extends React.Component {
  constructor(props) {
    super(props);

    this.progress = this.progress.bind(this);

    this.state = {
      completed: 0,
    };
  }

  componentDidMount() {
    this.timer = setInterval(this.progress, 500);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  progress() {
    if (this.state.completed === 100) {
      this.setState({ completed: 0 });
    } else {
      const diff = Math.random() * 10;
      this.setState({ completed: Math.min(this.state.completed + diff, 100) });
    }
  }

  render() {
    return (
      <div>
        <LinearProgress variant="determinate" value={this.state.completed} margin={{ bottom: 3 }} />
        <LinearProgress variant="determinate" value={this.state.completed} color="secondary" />
      </div>
    );
  }
}

Linear Query

<>
  <LinearProgress variant="query" margin={{ bottom: 3 }} />
  <LinearProgress variant="query" color="secondary" />
</>

<>
  <LinearProgress variant="query" margin={{ bottom: 3 }} />
  <LinearProgress variant="query" color="secondary" />
</>