Spinner

Used for indicating an unspecified wait time.

#
Documentation

#
Usage


import { Spinner } from "@optiaxiom/react";
 
export function App() {
  return <Spinner />;
}

#
Size

Use the size prop to select between the different sizes.


import { Flex, Spinner } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row">
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
    </Flex>
  );
}

#
Label

Use children to show an optional label for the spinner.


import { Spinner } from "@optiaxiom/react";
 
export function App() {
  return <Spinner>Loading...</Spinner>;
}

#
Appearance

Set the appearance prop to inverse when displaying spinner on dark background.

Appearance


"use client";
 
import type { ComponentPropsWithRef } from "react";
 
import { Spinner } from "@optiaxiom/react";
 
export function App({
  appearance = "inverse",
}: Pick<ComponentPropsWithRef<typeof Spinner>, "appearance">) {
  return (
    <Spinner
      appearance={appearance}
      bg={appearance === "default" ? "bg.default" : "bg.default.inverse"}
      p="8"
      rounded="sm"
      size="sm"
    />
  );
}

#
Related

Progress

Display feedback on status of task or length of a process.

Skeleton

Display placeholder content while data is loading.

#
Props

#
Spinner

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`appearance` `"default" \| "inverse"` Default: `default`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`

#
Changelog

#
0.1.0

Added component