Progress Indicators

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

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.

Goes from 0 to 100 linearly.

Goes from 0 to 100 along the circumference.

Spins endlessly to show indeterminate progress unlike progress bar and ring.

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

Progress bar comes in 2 sizes - small and regular.

Progress Bar - Size

Progress bar comes in 3 sizes - small, regular and large.

Progress Ring - Size

Progress bar comes in 4 sizes - extra small, small, regular and large.

Spinner - Size

For images, skeleton loaders come in 2 shapes - square and round.

Skeleton Loaders - Image - Shape

When the time taken to load a process is determinable.

Showing progress using progress bar

Showing progress using progress ring

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

Showing loading state using skeleton loaders

Showing loading state using spinner

Showing loading state using spinner in button

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

Static vs Dynamic content

Spinners are used differently depending on their size.

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

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.