Progress indicator

How to use progress indicators

Progress indicators are used when retrieving data or performing actions that take a long time. Although they don’t show details about what is going on in the back-end, progress indicators reassure users that their action is being processed.

When using a progress indicator:

Use only one type of progress indicator per page
Be consistent by using the same type of progress indicator for the same kind of activity
Include a short visible label that clearly explains what’s happening to the user
Use ARIA to announce the progress indicator to screen reader users
Only use if the wait time is expected to be longer than a second

Types of progress indicator

Progress spinner and progress bar

The progress spinner and progress bar are two visually distinct types of progress indicators. Only one type should represent each kind of activity in an experience.

Interactive demo - Sainsbury's

Interactive demo - Sainsbury's

Determinate or indeterminate

A progress indicator can be determinate or indeterminate.

Determinate indicators display how long a process will take. They should be used in longer processes as they will increase the user’s willingness to wait.

Interactive demo - Sainsbury's

() => {
  class Loading extends React.Component {
    constructor() {
      super()

      this.state = {
        loading: false,
        progress: 0,
      }

      this.start = this.start.bind(this)
      this.reset = this.reset.bind(this)
      this.increment = this.increment.bind(this)
    }

    componentWillUnmount() {
      clearTimeout(this.timeout)
    }

    increment() {
      this.timeout = setTimeout(() => {
        const { progress } = this.state
        const newProgress = Math.min(
          progress + Math.floor(Math.random(0, 1) * 10),
          100
        )
        this.setState({ progress: newProgress })

        if (newProgress < 100) {
          this.increment()
        }
      }, Math.floor(Math.random(0, 1) * 500))
    }

    start() {
      this.setState({ loading: true })
      this.increment()
    }

    reset() {
      clearTimeout(this.timeout)
      this.setState({ progress: 0, loading: false })
    }

    render() {
      const { loading } = this.state
      return (
        <div className="ln-u-display-flex">
          <FilledButton
            onClick={() => (loading ? this.reset() : this.start())}
            className="ln-u-push-right"
          >
            {loading ? "Reset" : "Start"}
          </FilledButton>

          <div className="ln-u-display-flex ln-u-align-items-center ln-u-text-align-center">
            <ProgressIndicator
              value={this.state.progress}
              loading={loading && this.state.progress < 100}
            >
              <ProgressSpinner className="ln-u-margin-right" />
              Loading, {this.state.progress.toString()}% complete
            </ProgressIndicator>
            {!loading && "Waiting to begin"}
            {this.state.progress === 100 && "Complete"}
          </div>
        </div>
      )
    }
  }

  return <Loading />
}

() => {
  class Loading extends React.Component {
    constructor() {
      super()

      this.state = {
        loading: false,
        progress: 0,
      }

      this.start = this.start.bind(this)
      this.reset = this.reset.bind(this)
      this.increment = this.increment.bind(this)
    }

    componentWillUnmount() {
      clearTimeout(this.timeout)
    }

    increment() {
      this.timeout = setTimeout(() => {
        const { progress } = this.state
        const newProgress = Math.min(
          progress + Math.floor(Math.random(0, 1) * 10),
          100
        )
        this.setState({ progress: newProgress })

        if (newProgress < 100) {
          this.increment()
        }
      }, Math.floor(Math.random(0, 1) * 500))
    }

    start() {
      this.setState({ loading: true })
      this.increment()
    }

    reset() {
      clearTimeout(this.timeout)
      this.setState({ progress: 0, loading: false })
    }

    render() {
      const { loading } = this.state
      return (
        <div className="ln-u-display-flex">
          <FilledButton
            onClick={() => (loading ? this.reset() : this.start())}
            className="ln-u-push-right"
          >
            {loading ? "Reset" : "Start"}
          </FilledButton>

          <div className="ln-u-display-flex ln-u-align-items-center ln-u-text-align-center">
            <ProgressIndicator
              value={this.state.progress}
              loading={loading && this.state.progress < 100}
            >
              <ProgressSpinner className="ln-u-margin-right" />
              Loading, {this.state.progress.toString()}% complete
            </ProgressIndicator>
            {!loading && "Waiting to begin"}
            {this.state.progress === 100 && "Complete"}
          </div>
        </div>
      )
    }
  }

  return <Loading />
}

Indeterminate indicators express an unspecified amount of wait time. They should be used when the wait time is unknown or the wait time is expected to be short enough that it’s not necessary to display.

Interactive demo - Sainsbury's

Page loading indicators

If a user’s action changes the context of the whole page, a page loading indicator overlays the page and prevents the user taking any further actions until the process is complete. The page loading indicator can be used as a progress spinner or progress bar.

Interactive demo - Sainsbury's

Interactive demo - Sainsbury's