Loader

Loaders are used to show that something is in progress. They keep users informed about the what's going on.

Demo

Usage

When to use

• Wait times longer than a second. If the potential waiting time could be longer than a second, show a loader.

When not to use

• Wait times are expected to be instant. Don't show a loader if the expected wait time is effectively zero, like when loading a small, cached resource. Flashing loaders can be distracting and make an interface look broken.
• Ongoing processes. Don't show a loader for processes that are ongoing and that don't have an end. For example, don't use a loader to show that an app is running.

Variants

Quick reference

Variant	Usage
circular	Processes that can't say how much they're complete.
linear	Processes that can say how complete they are, from 0 to 100%.

Circular

Demo

<CircularLoader />

• Use a circular loader when the loading time is uncertain.

Linear

Demo

<LinearLoader amount="25" />

• Use a linear loader when the progress can be shown as a percentage of 100%.

Format

Size

Extra Small

Demo

Small

Demo

Medium

Demo

Large

Demo

<CircularLoader extrasmall />
<CircularLoader small/>
<CircularLoader />
<CircularLoader large />

• Circular loaders are available in four sizes.
• Use the size that matches the size of the component being loaded.

Options

Inverted

Demo

<CircularLoader invert />

• Inverted loaders can be used on dark backgrounds, like a blocking backdrop layer.

API Reference

CircularLoader

Usage

To use CircularLoader, you can import the component from the @dhis2/ui library

import { CircularLoader } from '@dhis2/ui'

Props

Name	Type	Default	Required	Description
aria-label	string
className	string
dataTest	string	'dhis2-uicore-circularloader'
extrasmall	custom
invert	boolean
large	custom
small	custom

LinearLoader

Usage

To use LinearLoader, you can import the component from the @dhis2/ui library

import { LinearLoader } from '@dhis2/ui'

Props

Name	Type	Default	Required	Description
amount	number		*	The progression in percent without the '%' sign
aria-label	string
className	string
dataTest	string	'dhis2-uicore-linearloader'
invert	boolean			Use inverted color scheme
margin	string	spacers.dp12		The margin around the loader, can be a full shorthand
width	string	'300px'		The width of the entire indicator