Design Tokens for Mesh have just been released!
Skip to content

The Loader component provides an animated SVG-based loader that similarly to icons, is light, simple, and clearly recognisable, while being distinctive and complementary to the nib brand.

Iconography guidelines

As the loader is an animated icon, it shares the same guidelines as the icons.

The iconography section of Mesh has a comprehensive overview of our iconography guidelines and should be adhered to when working with the loader.

View iconography guidelines

Installation

bash
npm install @nib/loader

Usage

jsx
import Loader from '@nib/loader';
<Loader size="md" />;

Interactive demo

jsx

Props

All props passed to <Loader /> will be applied to the underlying <svg> as attributes.

PropTypeDefaultDescription
sizestring or numbersm (24px)The size of the loader. This value is applied to the height and width of the underlying <svg>. See Resizing a loader for more details.
fillstringA linear gradient from colorBrandBase to colorBrandLightThe main fill of the loader. This value is applied to the underlying <svg>/<path> fill.
descriptionstringLoadingTo configure the screen reader announcement text, use this property. Ensure the loader is enclosed within an element with the aria-live attribute set appropriately.

Resizing a loader

By default, the loader is rendered at 24px.

There are three ways that a loader can be sized: using the standard scale, using a custom value, and using an object of breakpoints.

Standard scale

This method uses a string which maps to the following loader scale:

SizeValue
xs16
sm24
md32
lg48
xl64
xxl96
xxxl128

When a size is provided to a loader with this method, the corresponding value is passed to the underlying <svg> of the loader as px units.

jsx
<Loader size="xxl" /> // Renders loader at 128px

Custom value

This method uses a custom number which represents the pixel size of the loaders underlying <svg>. This allows users to define their own values outside of the standard scale.

Example:

jsx
<Loader size={72} /> // Renders loader at 72px

Object of breakpoints

Alternatively, you can manually define an object of key-value pairs for a breakpoint and its corresponding loader size at this screen width.

This method uses a custom prop breakpoints to define the object of breakpoints and the breakpoint utility from our layout package to map the breakpoints to height and width attributes.

Example:

jsx
import styled, {css} from 'styled-components';
import {map} from '@nib/layout';
const DynamicLoader = styled(Loader)`
${({breakpoints}) =>
map(
breakpoints,
val =>
css`
width: ${val}px;
height: ${val}px;
`
)}
`;
<DynamicLoader breakpoints={{xs: 48, lg: 128}} />; // Renders loader at 48px at 'xs' screen size, and 128px at 'lg' screen size.

Accessibility

To improve the accessibility of the loader, wrap it inside an element with the aria-live attribute. For a comprehensive list of possible values for aria-live, please refer to the MDN documentation.

jsx
<div role="status" aria-live="polite">
<Loader description="Loading content" />
</div>