Components
Loader
A loader is a visual progress or activity indicator that tell the user that content is loading or data is processing.
Interactive demo
This demo lets you preview the Loader component and its variations.
<div className="js-loader-examples-default" />
Usage
Loaders are used when the site or app is loading or processing, as a way to ask the user to wait. This Loader is indeterminate, which means it does not indicate how long the process may take or how much of the total has been completed. An indeterminate loader should be used when a process takes between 1 and 10 seconds.
Text labels
Short text labels
When it’s not obvious what is being processed, use a label above the loader to inform the user.
Formatting
Anatomy
A Loader consists of 12 rectangles, each one with different opacity. This creates the illusion of a clockwise rotation.
Loader in greyscale/grey-700
Size 300
a. 100%
b. 89.58%
c. 79.17%
d. 68.75%
e. 58.33%
f. 47.92%
g. 37.5%
h. 27.08%
i. 25%
j. 25%
k. 25%
l.25%
Loader in greyscale/grey-700
Size 200
a. 100%
b. 87.5%
c. 75%
d. 62.5%
e. 50%
f. 7.5%
g. 25%
h. 25%
i. 25%
j. 25%
Loader in greyscale/grey-700
Size 100
a. 100%
b. 84.38%
c. 68.75%
d. 53.13%
e. 37.5%
f. 25%
g. 25%
h. 25%
Loader sizing
The Loader has three default sizes: (14, 24 and 48px) which should always be used unless otherwise specified.
Modify
Color theme
Loaders can be inverted when used on dark backgrounds.
- Standard Loader
- Inverted Loader
Behavior
Status Error Messages
A functional Loader can create uncertainty for users if the process takes a long time (over 10 seconds). If the process is slower, use text to communicate to the user that the process is expected to take longer. If the process is not proceeding as expected, use error messages to let the user know something is wrong, rather than letting the loader remain in its state infinitely.
