Spinner

An animated indicator for work in progress.

React, Vue, Solid, and Svelte

import { Spinner } from "@isbatak/react-ui/spinner"
import { HStack } from "styled-system/jsx"

export function SpinnerDemo() {
  return (
    <HStack gap="5">
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="xl" />
    </HStack>
  )
}

A span styled with the spinner recipe. size="inherit" matches the surrounding font size, which is how Loader uses it.

Usage

import { Spinner } from "@isbatak/react-ui/spinner"
import { HStack } from "styled-system/jsx"

export function SpinnerDemo() {
  return (
    <HStack gap="5">
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="xl" />
    </HStack>
  )
}