Newskit Logo

Progress indicator


The progress indicator shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way.


The progress indicator displays progress by animating the indicator along the length of the track. The progress indicator fills the circular track with colour, as it moves from 0 to 360 degrees over a quicker duration and repeats the animation until the action has been completed.


The progress indicator displays progress by animating an indicator along an invisible circular track in a clockwise direction. It can be applied to buttons, inputs or other elements.

Don't show more than one progress indicator as the user is likely to become overwhelmed! If more than one piece of content is processing, stick to a large for the whole screen and consider skeleton loading or linear progress indicators.



If provided, overrides the respective presets for the component and provided elements.
If provided, this overrides the style preset applied to the ProgressIndicator.
sizeMQ<string> = iconSize020
If provided, this overrides the size token applied to the ProgressIndicator.
Refer to the defaults below for the object structure:
  stylePreset: "iconDefault"


Indicator StylePreset
import React from 'react';
import { IndeterminateProgressIndicator } from 'newskit';

export default () => (
  <IndeterminateProgressIndicator overrides={{}} />