GrowingEllipsisSpinner

Default spinner

Show code

default.tsx

import { GrowingEllipsisSpinner } from "@hrc/spinner";

export function GrowingEllipsisSpinnerDefault() {
  return <GrowingEllipsisSpinner />;
}

Colors

Use the color prop to change the color of the spinner.

Show code

colors.tsx

import { GrowingEllipsisSpinner } from "@hrc/spinner";

export function GrowingEllipsisSpinnerColors() {
  return (
    <>
      <GrowingEllipsisSpinner color="primary" />
      <GrowingEllipsisSpinner color="secondary" />
      <GrowingEllipsisSpinner color="error" />
      <GrowingEllipsisSpinner color="info" />
      <GrowingEllipsisSpinner color="warning" />
      <GrowingEllipsisSpinner color="success" />
    </>
  );
}

Sizes

Set the size prop to change the size of the spinner.

Show code

sizes.tsx

import { GrowingEllipsisSpinner } from "@hrc/spinner";

export function GrowingEllipsisSpinnerSizes() {
  return (
    <>
      <GrowingEllipsisSpinner color="primary" size="small" />
      <GrowingEllipsisSpinner color="secondary" />
      <GrowingEllipsisSpinner color="error" size="large" />
    </>
  );
}

Speeds

Set the speed prop to change the speed of the spinner.

Show code

speeds.tsx

import { GrowingEllipsisSpinner } from "@hrc/spinner";

export function GrowingEllipsisSpinnerSpeeds() {
  return (
    <>
      <GrowingEllipsisSpinner color="info" speed="slow" />
      <GrowingEllipsisSpinner color="warning" />
      <GrowingEllipsisSpinner color="success" speed="fast" />
    </>
  );
}

API

See documentation below for reference to all of the props, classes and CSS variables (custom properties) available for <GrowingEllipsisSpinner />:

• <GrowingEllipsisSpinner />