Loader

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.

Installation

npm install @nib/loader

Usage

import Loader from '@nib/loader';

<Loader size="md" />;

Interactive demo

<Loader size="lg" />

Props

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

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:

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.

<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:

<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:

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.

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

Related components

• Icons