Spinner

A loading indicator that shows ticks or a ring. It waits before appearing and stays long enough to avoid flickering. Use it to show loading states in a smooth, subtle way.

bypreet from Hextaui

Installation

terminal

pnpm dlx layro-cli add @preetsuthar17/spinner

npx layro-cli add @preetsuthar17/spinner

npx layro-cli add @preetsuthar17/spinner

bunx layro-cli add @preetsuthar17/spinner

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client"

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

import {
  useDelayedLoading,
  type DelayedLoadingOptions,
} from "@/hooks/use-delayed-loading"

const spinnerVariants = cva("shrink-0", {
  variants: {
    size: {