Spinner

Spinners indicate the loading state of a component or page. Spinners are used within the Loading Indicator component.

Basic Usage

import React from 'react';
import { Spinner } from 'react-magma-dom';

export function Example() {
  return <Spinner />;
}

Aria-Label

By default, the aria-label for the spinner is "Loading", but this can be customized using the aria-label prop.

import React from 'react';
import { Spinner } from 'react-magma-dom';

export function Example() {
  return <Spinner aria-label="Custom aria label" />;
}

Color

The default is magma.colors.primary (#006298), but can be customized using the color prop, which takes a string.

import React from 'react';
import { Spinner, magma } from 'react-magma-dom';

export function Example() {
  return <Spinner color={magma.colors.danger} />;
}

Size

The size prop can be used to set the height and width of the spinner. Can be a string or a number; if a number is provided the height and width will be in pixels.

The default value is '16px'.

import React from 'react';
import { Spinner } from 'react-magma-dom';

export function Example() {
  return (
    <>
      <Spinner size={30} />
      <br />
      <Spinner size="3em" />
    </>
  );
}

Spinner Props

This component uses forwardRef. The ref is applied to the outer span element.

All of the global HTML attributes can be provided as props and will be applied to the wrapping span element that gets rendered.