Spinner

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

Imports#

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

Usage#

<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

<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 stroke#

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

<div className="flex items-center space-x-2">
  <Spinner size="md" stroke="visible" />
  <Spinner size="md" stroke="transparent" />
</div>

With Label#

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

<div className="flex items-center space-x-2">
  <Spinner size="md" label="spinning" />
</div>

API Reference#