Skip to main content


A progress component helps the user to know the status or progress of the task at hand. It informs them that the website is NOT frozen. It is read only, not interactive and has the following variations:

Determinate - the progress is measurable and shows the percentage of completion of an operation.

Indeterminate Regional - the progress is not measurable and pertains to a region of the web page affected by the progress. The component is placed above that region. ("Region" in this sense means a defined, persistent space distinct to other content on the page or screen.)

Indeterminate Local - the progress is not measurable, and in general, it blocks some amount of user interaction. In addition, the component is placed relative to the content focal point that pertains to the progress. Designer can choose among 2 sizes appropriate to the focal point.


Different progress types on a default theme

Best practices

It’s not always necessary to show progress. Sometimes a task’s progress is obvious enough on its own or the task completes so quickly that showing progress would be distracting. Here are some points to consider when determining whether you should show progress.

  • Does the operation take more than two seconds to complete? If so, show progress as soon as the operation starts. If an operation takes more than two seconds to complete most of the time, but sometimes completes in under two seconds, wait 500ms before showing the component to avoid flickering.
  • Is the operation waiting for the user to complete a task? If so, don’t use progress. The progress component is for showing computer progress, not user progress.
  • Does the user need to know that something is happening? For example, the web app may be progressively loading parts of the site that aren’t immediately visible to the user. If it’s happening in the background and the user didn’t initiate the action, the user doesn’t need to know about it.
  • Can you use the content from the operation to visualize progress? If so, don’t show progress. For example, when displaying images loaded from the disk, images appear on the screen one-by-one as they are loaded. Displaying progress would provide no benefit; it would just clutter the UI.

Determinate Progress

  • Use when long-running progress is measurable. Ex. Downloading a large file.
  • Use to show the percentage of completion of an operation.
  • Can be used locally or regionally on a webpage. Example of local usage: It could be used on each item of a list of apps which are downloading to show progress on each app. Regional example: Excel Online’s status bar shows determinate progress for actions affecting the entire workbook.
  • Determinate progress can be used when the user interaction is blocked or unblocked.

Indeterminate Regional Progress

  • Use when immeasurable progress is underway pertaining to a group of user interaction or a defined area of the web page. Ex. Across a table of data if it is loading.
  • Place indeterminate regional progress at the highest point of the affected region.
  • Use to indicate long non-modal processes (greater than 2 seconds).
  • Consider the performance implications of the user experience when waiting for longer than 2 seconds.

Indeterminate Local Progress

  • Use when the amount of progress is indeterminate, for example, immeasurable loading of content.
  • Use to notify the user to wait.
  • Use to signal to the user that some amount of user interaction is blocked until the app completes the task, that is, the activity is modal. Ex. If a button initiated an operation, it might change to a disabled state, during which indeterminate local progress would be placed near the disabled button until the operation was complete.
  • Use for long, non-quantifiable modal processes. Ex. Splash loading screens.
  • Use the large size on large loading screens or when there are only a few elements on the page with a large amount of whitespace. In a sense they are still local to the content focal point.
  • Use when it is critical to display progress close to the initiating action.


  • Use only when necessary and when there is truly some process represented by the indicator.
  • Be mindful of its style and placement in the page according to the guidance above.


  • Don't use as a decorative tool to show that something is happening when there are no processes or events happening.
  • Rely on progress as the only solution for poor latency problems. Ideally, the expected action would happen naturally without any need for a progress indicator.

Also known as

Progress indicator
Progress bar
Loading indicator
Busy dots
Progress ring
Progress circle


  • Bring focus to the progress element if the user should wait until the progress is complete before interacting with the page.
  • Do not bring focus to the progress element if the user can interact with the page while progress is being displayed.
  • When the progress element is loading a region of a page, the progress element should get the aria-describedby attribute with a value of the id of the region being loaded. The region getting loaded should have the attribute aria-busy="true" until progress has completed.
  • Add aria-labelto the progress element for additional accessibility context.


  • Set style to determinate when progress is measurable.
  • Set style to indeterminate-regional when a process is underway that affects or will affect a particular region of the page.
  • Set style to indeterminate-local to indicate progress close to the object that initiated the action. Set size to large or small.


  • Schema definition: The progress schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Progress (determinate)

<progress class="c-progress" role="progressbar" max="100" value="80" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" tabindex="0" aria-label="determinate progress bar">
    <!--[if lt IE 9]>
        <div class="c-progress" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" tabindex="0" aria-label="determinate progress bar">
            <span style="width:80%"></span>

Progress (indeterminate regional)

<div class="c-progress f-indeterminate-regional" role="progressbar" aria-valuetext="Loading..." tabindex="0" aria-label="indeterminate regional progress bar">

Progress (indeterminate local - small)

<div class="c-progress f-indeterminate-local f-progress-small" role="progressbar" aria-valuetext="Loading..." tabindex="0" aria-label="indeterminate local small progress bar">

Progress (indeterminate local - large)

<div class="c-progress f-indeterminate-local f-progress-large" role="progressbar" aria-valuetext="Loading..." tabindex="0" aria-label="indeterminate local large progress bar">