Skip to main content

​
Overview

The Spinner component displays loading indicators with support for determinate (with progress) and indeterminate modes, multiple sizes, and label placement.

​
Basic Usage

import { Spinner } from '@peppermint-design/devreadykit-custom';

export default function SpinnerBasic() {
  return <Spinner />;
}

​
Sizes

import { Spinner } from '@peppermint-design/devreadykit-custom';

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

​
With Label

import { Spinner } from '@peppermint-design/devreadykit-custom';

<Spinner label="Loading..." />
<Spinner label="Processing" labelPlacement="bottom" />

​
Determinate (With Progress)

import { Spinner } from '@peppermint-design/devreadykit-custom';

<Spinner progress={50} label="50%" />
<Spinner progress={75} label="75%" size="lg" />

​
Props