Loading Spinner

View as Markdown

Animated SVG loading indicator.

Basic

Show code
Hide code
 
import { LoadingSpinner } from '@mylighthouse/prism-react';

export default function Basic(): React.JSX.Element {
  return <LoadingSpinner />;
}

Sizes

Inherits the Icon size scale. The default size is medium.

extra-small
small
medium
large
Show code
Hide code
 
import { LoadingSpinner } from '@mylighthouse/prism-react';

export default function Sizes(): React.JSX.Element {
  return (
    <div className="flex gap-300 items-center">
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner size="extra-small" />
        <span className="text-200--regular">extra-small</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner size="small" />
        <span className="text-200--regular">small</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner size="medium" />
        <span className="text-200--regular">medium</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner size="large" />
        <span className="text-200--regular">large</span>
      </div>
    </div>
  );
}

Colors

Inherits the Icon color scale. The default color is default.

default
default-inverse
emphasis
subdued
info
success
warning
critical
intelligence
brand
on-info
on-success
on-warning
on-critical
on-intelligence
on-brand
disabled
Show code
Hide code
 
import { LoadingSpinner } from '@mylighthouse/prism-react';

export default function Colors(): React.JSX.Element {
  return (
    <div className="flex gap-300 flex-wrap">
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="default" />
        <span className="text-200--regular">default</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="default-inverse" />
        <span className="text-200--regular">default-inverse</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="emphasis" />
        <span className="text-200--regular">emphasis</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="subdued" />
        <span className="text-200--regular">subdued</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="info" />
        <span className="text-200--regular">info</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="success" />
        <span className="text-200--regular">success</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="warning" />
        <span className="text-200--regular">warning</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="critical" />
        <span className="text-200--regular">critical</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="intelligence" />
        <span className="text-200--regular">intelligence</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="brand" />
        <span className="text-200--regular">brand</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="on-info" />
        <span className="text-200--regular">on-info</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="on-success" />
        <span className="text-200--regular">on-success</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="on-warning" />
        <span className="text-200--regular">on-warning</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="on-critical" />
        <span className="text-200--regular">on-critical</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="on-intelligence" />
        <span className="text-200--regular">on-intelligence</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="on-brand" />
        <span className="text-200--regular">on-brand</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <LoadingSpinner color="disabled" />
        <span className="text-200--regular">disabled</span>
      </div>
    </div>
  );
}

Accessibility

LoadingSpinner is always aria-hidden="true" and that cannot be overridden, so it is purely decorative.

Announce the loading state yourself from a separate role="status" region:

<div className="sr-only" role="status">
  {isLoading ? "Loading" : ""}
</div>

If the spinner replaces the visible label of a control, keep an accessible name on that control.

API Reference

Name Default Type Description
color -- "critical" | "warning" | "success" | "intelligence" | "brand" | "info" | "inherit" | "default" | "default-inverse" | "emphasis" | "subdued" | "on-info" | "on-success" | "on-warning" | "on-critical" | "on-intelligence" | "on-brand" | "disabled" --
size -- "small" | "medium" | "large" | "extra-small" --