Skip Navigation
React Magma

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" />
    </>
  );
}

isInverse

import React from 'react';


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


export function Example() {
  return (
    <div style={{ background: magma.colors.primary600, padding: '12px' }}>
      <Spacer size={magma.spaceScale.spacing04} />
      <Spinner size={30} isInverse />
      <Spacer size={magma.spaceScale.spacing04} />
    </div>
  );
}

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.

color

Description

The color of the spinner border

Type

string

Default

theme.colors.primary (#3942B0)

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

size

Description

The height and width of the spinner. Can be a string or number; if number is provided, the size is in px.

Type

string | number

Default

16

On this page

Deploys by Netlify