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. It comes in 2 sizes -
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 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).
Note: Large size is only available for ‘Spinners’.
When the time taken to load a process is determinable.
When the time taken to load a process cannot be determined.
Skeleton loaders imitate each component of a cell separately at the time of loading, to create a perception of decreased loading time.
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.