Spinner

Props

The Spinner component accepts the following props:

Color

Type: string
Default: primary
Options: danger | warning | success | primary | secondary | bg

The color prop sets the color of the spinner. You can choose from a range of colors including green, red, orange, primary, purple, secondary, brown and bg.

import { Spinner, Flex } from '@pillar-ui/core'

export function SpinnerColors() {
  return (
    <Flex gap="sm">
      <Spinner color="suc" />
      <Spinner color="dan" />
      <Spinner color="war" />
      <Spinner color="pri" />
      <Spinner color="sec" />
      <Spinner color="bg" />
    </Flex>
  )
}

Size

Type: string
Default: md
Options: 2xs | xs | sm | md | lg | xl | 2xl

The size prop sets the size of the spinner. You can choose from a range of sizes including 3xs, 2xs, xs, sm, md, xl, 2xl and 3xl.

import { Spinner, Flex } from '@pillar-ui/core'

export function SpinnerSizes() {
  return (
    <Flex gap="sm" items="center">
      <Spinner size="3xs" />
      <Spinner size="2xs" />
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="xl" />
      <Spinner size="2xl" />
      <Spinner size="3xl" />
    </Flex>
  )
}

Thickness

The thickness prop sets the thickness of the spinner. You can set any thickness value in pixels.

import { Spinner, Flex } from '@pillar-ui/core'

export function SpinnerThickness() {
  return (
    <Flex gap="sm" items="center">
      <Spinner thickness="1px" />
      <Spinner thickness="2px" />
      <Spinner thickness="3px" />
      <Spinner thickness="4px" />
      <Spinner thickness="5px" />
      <Spinner thickness="6px" />
      <Spinner thickness="200px" />
    </Flex>
  )
}

Invert

The invert prop inverts the color of the spinner, which can be useful when the spinner's default color clashes with the background color.

import { Spinner, Flex } from '@pillar-ui/core'

export function SpinnerInvert() {
  return (
    <div className="l_f-md">
      <Flex gap="sm" items="center">
        <Spinner color="suc" />
        <Spinner color="dan" />
        <Spinner color="war" />
        <Spinner color="pri" />
        <Spinner color="purple" />
        <Spinner color="sec" />
        <Spinner color="brown" />
        <Spinner color="bg" />
      </Flex>
      <Flex gap="sm" items="center">
        <Spinner invert color="suc" />
        <Spinner invert color="dan" />
        <Spinner invert color="war" />
        <Spinner invert color="pri" />
        <Spinner invert color="purple" />
        <Spinner invert color="sec" />
        <Spinner invert color="brown" />
        <Spinner invert color="bg" />
      </Flex>
    </div>
  )
}

Use Case

The Spinner component is used to indicate loading or progress state. It can be used in various scenarios such as when data is being fetched or when a page is loading.

Indicating data loading: When data is being fetched from an API or a database, a Spinner can be used to indicate to the user that the data is being loaded.
Indicating page loading: When a page is being loaded, a Spinner can be used to indicate to the user that the page is loading.
Indicating form submission: When a form is being submitted, a Spinner can be used to indicate to the user that the form is being processed.
Indicating file upload: When a file is being uploaded, a Spinner can be used to indicate to the user that the file is being uploaded.

These are just some of the common use cases for a Spinner component. It can be used in any scenario where you need to indicate loading or progress state to the user.

Troubleshooting

If you encounter any issues while using the Spinner component, please check if you have imported it correctly and if you are passing valid props.

Conclusion

The Spinner component is a versatile and easy-to-use component that can be used to indicate loading or progress state. It comes with a range of customization options and follows accessibility best practices.

Pillar UI React Spinner Component documentation