⚠️ Warning: You are looking at the documentation of the Aphrodite-UI which is being actively developed. There will very likely be outdated and missing documentation.

Spinner

Spinners provide a visual cue that an action is either processing, awaiting a course of change or a result.

Import

import { Spinner } from '@aphrodite-ui/react';

Usage

<Spinner />

Spinner with Color

<div className="flex items-center gap-2">
  <Spinner color="primary" />
  <Spinner color="info" />
  <Spinner color="success" />
  <Spinner color="warning" />
  <Spinner color="neutral" />
  <Spinner color="danger" />
  <Spinner color="hiContrast" />
  <Spinner color="loContrast" />
</div>

Spinner with different size

<div className="flex items-center gap-2">
  <Spinner size="xs" />
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</div>