Loading

This element visually represents that the application is busy. Useful to inform the user that they must wait while an action is processed.

Installation

pnpm add @inpulse-ds/loading

Usage

import {
  Loading,
  LoadingEllipsis,
  LoadingSpinner,
  LoadingSpinnerTrack,
  LoadingSpinnerBar,
} from "@inpulse-ds/loading";

return (
    <Loading>
      <LoadingSpinner>
        <LoadingSpinnerTrack />
        <LoadingSpinnerBar />
      </LoadingSpinner>
    </Loading>
  );

Examples

Ellipsis

Spinner

Colors

By default, Loading accent elements will be assigned the theme's primary color. But you can customize the color through CSS classes applied directly to LoadingSpinnerBar.

Adopt a monochromatic style for Loading by setting the mono property to true. This style will adapt to the system's light and dark mode.

Sizes

It is possible to define the size of the loading element through the size property, which can be applied to both LoadingSpinner and LoadingEllipsis. Available values ​​are sm, md and lg. If nothing is defined, the default size will be md.

<LoadingSpinner size="lg" />