Skip to content
Velkin LogoVelkin Logo
Velkin
VELKIN/UI

Modern UI components for product teams and their AI agents. Lit core, typed wrappers, live MCP.

sales@velkinui.com

Product

  • Docs
  • Components
  • Studio
  • Pricing

Resources

  • Quick start
  • Blog
  • Changelog
  • Roadmap
  • Status

Project

  • About
  • Contact
  • License
  • Privacy
  • Terms

© 2026 Velkin. MIT core · Pro licenses available.

VELKIN

Spinner

A spinner component with multiple visual variants and overlay modes.

vu-spinner · @velkin/react/spinner

Copy page

Import

React
npm i @velkin/react

import { VuSpinner } from "@velkin/react/spinner";

Examples

API

Props

PropTypeDefaultDescription
variantVuSpinnerVariant"solid"Spinner visual style.
sizestring"md"Size preset or CSS length.
colorVuSpinnerColor"primary"Foreground intent token (`currentColor`).
labelstring""Accessible name; defaults to a localized loading label.
overlaybooleanfalseCovers the parent element as an overlay.
fullscreenbooleanfalseCovers the viewport as a fullscreen overlay.
backdropBlurbooleanfalseBlurs content behind overlay modes.
speednumber1Animation speed multiplier (`1` = default rate).
pausedbooleanfalsePauses animation without removing the element.

CSS parts

PartDescription
spinnerRoot flex container; becomes the overlay surface when `overlay` / `fullscreen`.
circleRing-style variants (`solid`, `track`, `gradient`, …).
dotsThree-dot variant container.
dotIndividual dot in the `dots` variant.
barsFour-bar variant container.
barIndividual bar in the `bars` variant.

Types

NameDefinition
VuSpinnerColor
"default" | "primary" | "success" | "warning" | "danger"
VuSpinnerSizePreset | string
string
VuSpinnerVariant
"solid"
| "gradient"
| "dots"
| "pulse"
| "track"
| "dashed"
| "segment"
| "dual"
| "material"
| "bars"

Related

Feedback

  • AlertAn alert component with intent colors, variants, and optional dismiss.
  • DialogA dialog component with region slots, focus trap, and backdrop.
  • DrawerA drawer component with slide-in panel, backdrop, and focus trap.
  • NotificationA notification component that renders the toast viewport.
  • OverlayAn overlay component with backdrop and centered content slot.
  • PopoverA popover component with smart placement and a trigger slot.

Guides

  • AccessibilityLabels and overlays
  • AppearanceStatus colors

Browse

  • Previous: SkeletonEarlier in the sidebar
  • Next: TooltipLater in the sidebar
  • All componentsBrowse the full index