Progress Indicators

Progress indicators are used to show progress of an ongoing process.

Usage
Code
Interactions

Progress indicator is a key part of any user interface screen. It helps users become aware of the loading progress of different components in the application.

Types


Progress Bar

Goes from 0 to 100 linearly.

Progress Ring

Goes from 0 to 100 along the circumference. It comes in 2 sizes -

Spinner

Spins endlessly to show indeterminate progress unlike progress bar and ring. Spinner comes in 3 sizes -

Small - For inline loaders such as in Buttons. Medium - For Modals and Cards. Big - For Page loaders.

Skeleton Loader

Skeleton loaders are used if there is a defined template for the data that is going to be displayed. This type of loading state should be used for container-based components(like avatars, lists, and so on) and data-based components(like tables).


Structure



Progress Bar

Structure of progress bar

PropertyValue(s)
Height2 px (Small)
8 px (Regular)
Corner radius4 px

Progress Ring

Structure of progress ring

PropertyValue(s)
Size16x16 px (Small)
32x32 px (Regular)

Spinner

Structure of Spinner

PropertyValue(s)
Size16x16 px (Small)
32x32 px (Regular)
48x48 px (Large)

Configurations



PropertyValue(s)Default value
Size
  • Small
  • Regular
  • Large
Regular
Value<value>-

Note: Large size is only available for ‘Spinners’.

Usage


Nature of the Process


Determinate

When the time taken to load a process is determinable.

  • Use Progress Bar for general determinable processes.
  • Showing progress using progress bar Showing progress using progress bar


  • Use Progress Ring if the process is contextual to a component
  • Showing progress using progress ring Showing progress using progress ring


    Indeterminate

    When the time taken to load a process cannot be determined.

  • Use Skeleton loaders if there is a defined template for the data that is going to be displayed.
  • Showing loading state using skeleton loaders Showing loading state using skeleton loaders


  • Use Spinners if there is no defined template for the data that is going to be displayed
  • Showing loading state using spinner Showing loading state using spinner


  • Use Spinners if the process is contextual to a component, e.g. button.
  • Showing loading state using spinner in button Showing loading state using spinner in button



    Skeleton Loaders


    Visual Structure

    Skeleton loaders imitate each component of a cell separately at the time of loading, to create a perception of decreased loading time.

    Visual structure of skeleton loaders Visual structure of skeleton loaders


    Page With Static vs Dynamic Content

    Static vs Dynamic content Static vs Dynamic content


    Skeleton Loader vs Spinner

    A typical process starts with loading the app first. Refer to the table below and the examples to have a better understanding:


    Progressive Loading

    Progressive loading is a technique that loads the page in chunks i.e. from the simplest view to the most detailed view. Table in the above section demonstrates the step-by-step loading of a page.


    Was this page helpful?