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).


Properties

PropertyValue(s)Default value
Size
  • Regular
  • Tiny
  • Large*
  • -

    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
  • Use Progress Ring if the process is contextual to a component
  • 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
  • Use Spinners if there is no defined template for the data that is going to be displayed
  • 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

    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
    Page with 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.