Spinner

Spinners provide a visual cue that an action is either processing, awaiting a course of change or a result. It uses AdaptUI's Box component internally.

import { Spinner } from "@adaptui/react-tailwind";

Usage

<Spinner  />

<Spinner  />

Spinner sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: xs sm md lg & em

import { Spinner } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex items-center space-x-2">
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="em" />
    </div>
  );
};

import { Spinner } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex items-center space-x-2">
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="em" />
    </div>
  );
};

Show track

To show the subtle track around the spinner we can use the track which accepts visible or transparent values

import { Avatar, AvatarGroup } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex items-center space-x-2">
      <Spinner size="md" track="visible" />
      <Spinner size="md" track="transparent" />
    </div>
  );
};

import { Avatar, AvatarGroup } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex items-center space-x-2">
      <Spinner size="md" track="visible" />
      <Spinner size="md" track="transparent" />
    </div>
  );
};

With Label

Spinner has a label prop to provide an customized A11y label which is only visible to the screen readers.

import { Avatar, AvatarGroup } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex items-center space-x-2">
      <Spinner size="md" label="spinning" />
    </div>
  );
};

import { Avatar, AvatarGroup } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex items-center space-x-2">
      <Spinner size="md" label="spinning" />
    </div>
  );
};

API Reference

Prop	Type	Default
`size`	`union`	`md`
`track`	`union`	`transparent`
`label`	`string`	`Loading...`

Last updated on July 26, 2022

Spinner

Imports#

Usage#

Spinner sizes#

Show track#

With Label#

API Reference#

Imports

Usage

Spinner sizes

Show track

With Label

API Reference