Spinner

This component renders a spinning loading spinner.

Import

import {Spinner} from "cui-react";

Example

Render a basic spinner:

Visual:

Code:

<div className=" flex space-x-4 p-10">
<Spinner size="large" /> <Spinner color="green" size="medium" /> <Spinner color="red" size="small" />
</div>

Customizing

You can customize the Spinner component using the following props:

• size (optional): Size of the spinner (small, medium, large). Defaults to medium.
• color (optional): Color variant of the spinner (blue, red, green, yellow, black, white). Defaults to blue.

Example: Custom Size and Color

Visual:

Code:

<Spinner size="large" color="green" />

This example renders a large spinner with a green color.

Props

• size

  • Type: "small" | "medium" | "large"
  • Description: Size of the spinner. Defaults to medium.

• color

  • Type: "blue" | "red" | "green" | "yellow" | "black" | "white"
  • Description: Color variant of the spinner. Defaults to blue.