Prism Docs

Basic

By default the bar is positioned absolutely and fills the width of its nearest positioned ancestor, so wrap it in a container with position: relative.

import { LoadingBar } from '@mylighthouse/prism-react';

export default function BasicExample(): React.ReactElement {
  return (
    <div className="relative w-full" style={{ height: 100 }}>
      <LoadingBar />
    </div>
  );
}

Fixed

Set isFixed with positionTop to pin the bar with position: fixed, measured in pixels from the top of the viewport. Use this for page-level loading, such as a bar at the very top of the screen.

import { LoadingBar } from '@mylighthouse/prism-react';

export default function FixedExample(): React.ReactElement {
  return <LoadingBar isFixed positionTop={49} />;
}

Accessibility

LoadingBar sets no ARIA of its own, so announcing the loading state is up to the consumer. Pick one of these, not both:

Give the bar role="progressbar" and a name.

<LoadingBar role="progressbar" aria-label="Loading" />

Hide the bar with aria-hidden="true" and announce loading through a separate role="status" region.

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

API Reference