Overview

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

Preview

Code

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

export function Demo() {
  return (
    <Loading>
      <LoadingSpinner>
        <LoadingSpinnerTrack />
        <LoadingSpinnerBar />
      </LoadingSpinner>
    </Loading>
  );
}

About

This is an original component from Inpulse.

It has two variations: Ellipsis and Spinner. The first displays a loading animation with ellipsis, while the second displays a circular spinner.

Installation

pnpm

pnpm add @inpulse-ui/loading

bun

bun add @inpulse-ui/loading

yarn

yarn add @inpulse-ui/loading

npm

npm install @inpulse-ui/loading

API Reference

Root

Contains all parts of a loading.

Prop	Type	Default Value	Required
active	boolean	true	No

Spinner

Represents the spinner group.

Prop	Type	Default Value	Required
size	enum	smmdlg	No

Spinner Bar

Represents the loading bar of the spinner.

Prop	Type	Default Value	Required
mono	boolean	false	No

Ellipsis

Represents the dots of the ellipsis loading element.

Prop	Type	Default Value	Required
mono	boolean	false	No
size	enum	smmdlg	No

Usage

Insert the LoadingSpinner or LoadingEllipsis component inside Loading, depending on the variation you want to use.

<Loading>
  <LoadingSpinner>
    <LoadingSpinnerTrack />
    <LoadingSpinnerBar />
  </LoadingSpinner>
</Loading>

Examples

Ellipsis

Preview

Code

import {
  Loading,
  LoadingEllipsis,
} from "@inpulse-ui/loading";

export function Demo() {
  return (
    <Loading>
      <LoadingEllipsis />
    </Loading>
  );
}

Spinner

Preview

Code

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

export function Demo() {
  return (
    <Loading>
      <LoadingSpinner>
        <LoadingSpinnerTrack />
        <LoadingSpinnerBar />
      </LoadingSpinner>
    </Loading>
  );
}

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.

Preview

Code

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

export function Demo() {
  return (
    <Loading>
      <LoadingSpinner>
        <LoadingSpinnerTrack />
        <LoadingSpinnerBar className="fill-teal-500" />
      </LoadingSpinner>
    </Loading>
  );
}

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.

Preview

Code

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

export function Demo() {
  return (
    <Loading>
      <LoadingSpinner>
        <LoadingSpinnerTrack />
        <LoadingSpinnerBar mono />
      </LoadingSpinner>
    </Loading>
  );
}

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" />