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).
Property | Value(s) |
---|---|
Height | 2 px (Small) 8 px (Regular) |
Corner radius | 4 px |
Property | Value(s) |
---|---|
Size | 16x16 px (Small) 32x32 px (Regular) |
Property | Value(s) |
---|---|
Size | 16x16 px (Small) 32x32 px (Regular) 48x48 px (Large) |
Property | Value(s) | Default value |
---|---|---|
Size |
| Regular |
Value | <value> | - |
Note: Large size is only available for ‘Spinners’.
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
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.