logo

Spinner

A spinner component showcases an indefinite wait period.

Usage#

Demo#

import { Spinner } from "pigment-ui";

function SpinnerDemo() {
  return <Spinner />;
}

Color#

import { Spinner } from "pigment-ui";

function SpinnerColor() {
  return (
    <div className="flex gap-4">
      <Spinner color="default" />
      <Spinner color="primary" />
      <Spinner color="info" />
      <Spinner color="success" />
      <Spinner color="warning" />
      <Spinner color="error" />
    </div>
  );
}

Size#

import { Spinner } from "pigment-ui";

function SpinnerSize() {
  return (
    <div className="flex gap-4">
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
    </div>
  );
}

Custom size#

import { Spinner } from "pigment-ui";

function SpinnerCustomSize() {
  return <Spinner className="size-16" />;
}
Edit this page