Skip Navigation
React Magma

Loading Indicator

When content is loading, the LoadingIndicator component can be used to communicate to users that the wait is expected and everything is normal.

Basic Usage

By default, the Loading Indicator uses the Spinner component.

import React from 'react';


import { LoadingIndicator } from 'react-magma-dom';


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

Progress Bar

The type prop can be used to change what sort of loading animation displays. The default type is spinner, but the progressbar type can also be used, to render the Progress Bar component.

import React from 'react';


import { LoadingIndicator } from 'react-magma-dom';


export function Example() {
  const [percentage, setPercentage] = React.useState(0);


  React.useEffect(() => {
    const timer1 = setTimeout(() => {
      setPercentage(10);
    }, 2000);


    const timer2 = setTimeout(() => {
      setPercentage(20);
    }, 4000);


    const timer3 = setTimeout(() => {
      setPercentage(30);
    }, 6000);


    const timer4 = setTimeout(() => {
      setPercentage(40);
    }, 8000);


    const timer5 = setTimeout(() => {
      setPercentage(50);
    }, 10000);


    const timer6 = setTimeout(() => {
      setPercentage(60);
    }, 12000);


    const timer7 = setTimeout(() => {
      setPercentage(70);
    }, 14000);


    const timer8 = setTimeout(() => {
      setPercentage(80);
    }, 16000);


    const timer9 = setTimeout(() => {
      setPercentage(90);
    }, 18000);


    const timer10 = setTimeout(() => {
      setPercentage(100);
    }, 20000);


    return () => {
      clearTimeout(timer1);
      clearTimeout(timer2);
      clearTimeout(timer3);
      clearTimeout(timer4);
      clearTimeout(timer5);
      clearTimeout(timer6);
      clearTimeout(timer7);
      clearTimeout(timer8);
      clearTimeout(timer9);
      clearTimeout(timer10);
    };
  }, []);


  return <LoadingIndicator percentage={percentage} type="progressbar" />;
}

Custom Messages

The LoadingIndicator, supports three levels of messages. One displays immediately, the second one appears after five seconds, and the third appears after 15 seconds. These messages can be customized by using the message1, message2 and message3 props.

import React from 'react';


import { LoadingIndicator } from 'react-magma-dom';


export function Example() {
  return (
    <LoadingIndicator
      message1="Custom message"
      message2="An additional custom message"
      message3="Third and final custom message"
    />
  );
}

Accessibility Considerations

Loading Indicators are intended to alert users to the fact that wait time is expected, so when a LoadingIndicator component is added to a UI, it is important that screen readers read the new content. One way to do this is to use the Announce component, which employs the aria-live attribute. Be sure to place the conditional logic to display the LoadingIndicator inside the Announce component.

import React from 'react';


import {
  Announce,
  Button,
  LoadingIndicator,
  ButtonGroup,
} from 'react-magma-dom';


export function Example() {
  const [showLoader, setShowLoader] = React.useState(false);


  return (
    <>
      <ButtonGroup>
        <Button onClick={() => setShowLoader(true)}>
          Show Loading Indicator
        </Button>
        <Button onClick={() => setShowLoader(false)}>
          Hide Loading Indicator
        </Button>
      </ButtonGroup>
      <br />
      <Announce>{showLoader && <LoadingIndicator />}</Announce>
    </>
  );
}

Inverse

import React from 'react';


import { LoadingIndicator, Card, CardBody } from 'react-magma-dom';


export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <LoadingIndicator isInverse />
      </CardBody>
    </Card>
  );
}

Loading Indicator Props

All of the global HTML attributes can be provided as props will be applied to the internal element. The internal element will be either a div when using the ProgressBar or a span when using the Spinner. Additionally, depending on which component is used internally, you can provide any props that the Spinner or the ProgressBar accepts. This is controlled by the passed in type prop.

isInverse

Description

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

Type

boolean

Default

false

message1

Description

Message displayed for the first five seconds

Type

string

Default

"Loading..."

message2

Description

Message displayed for the first five seconds

Type

string

Default

"Thank you for your patience. Still loading..."

message3

Description

Message displayed after 15 seconds

Type

string

Default

"Sorry for the delay. This is taking longer than expected."

percentage

Description

Message displayed for the first five seconds

Type

number

Default

0

type

Description

Type of loading indictor to display, can be progress bar or spinner

Type

enum, one of:
LoadingIndicatorType.progressbar
LoadingIndicatorType.spinner

Default

LoadingIndicatorType.spinner

On this page

Deploys by Netlify