Skip to content
Lenso UI

Spinner

A loading indicator component to show pending states

Usage

import { Spinner } from '@lenso/ui';
"use client";
import { Spinner } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ row: { display: "flex", alignItems: "center", gap: 16 } });
export function SpinnerBasic() {  return (    <div {...stylex.props(styles.row)}>      <Spinner />    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Examples

Colors

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Spinner } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  row: { display: "flex", alignItems: "center", gap: 32 },  column: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 },  caption: { fontSize: 12, lineHeight: "16px", color: "var(--muted)", textTransform: "capitalize" },});export function SpinnerColors() {  return (    <div {...stylex.props(styles.row)}>      {(["current", "accent", "success", "warning", "danger"] as const).map((color) => (        <div key={color} {...stylex.props(styles.column)}>          <Spinner color={color} />          <span {...stylex.props(styles.caption)}>{color}</span>        </div>      ))}    </div>  );}export default SpinnerColors;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Sizes

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Spinner } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  row: { display: "flex", alignItems: "center", gap: 32 },  column: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 },  caption: { fontSize: 12, lineHeight: "16px", color: "var(--muted)" },});export function SpinnerSizes() {  return (    <div {...stylex.props(styles.row)}>      {(        [          ["sm", "Small"],          ["md", "Medium"],          ["lg", "Large"],          ["xl", "Extra Large"],        ] as const      ).map(([size, label]) => (        <div key={size} {...stylex.props(styles.column)}>          <Spinner size={size} />          <span {...stylex.props(styles.caption)}>{label}</span>        </div>      ))}    </div>  );}export default SpinnerSizes;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Speed

Apply an animation utility to change how fast a single spinner rotates. Pair it with motion-reduce:animate-none so it stays still for users who prefer reduced motion.

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Spinner } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  row: { display: "flex", alignItems: "center", gap: 32 },  column: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 },  caption: { fontSize: 12, lineHeight: "16px", color: "var(--muted)" },  slow: { animationDuration: "1.5s" },  fast: { animationDuration: ".4s" },});export function SpinnerSpeed() {  return (    <div {...stylex.props(styles.row)}>      <div {...stylex.props(styles.column)}>        <Spinner xstyle={styles.slow} />        <span {...stylex.props(styles.caption)}>Slow</span>      </div>      <div {...stylex.props(styles.column)}>        <Spinner />        <span {...stylex.props(styles.caption)}>Default</span>      </div>      <div {...stylex.props(styles.column)}>        <Spinner xstyle={styles.fast} />        <span {...stylex.props(styles.caption)}>Fast</span>      </div>    </div>  );}export default SpinnerSpeed;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Customization

Tailwind CSS

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Spinner } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  row: {    display: "flex",    alignItems: "center",    gap: 16,    borderRadius: "var(--radius-xl)",    border: "1px solid var(--border)",    backgroundColor: "var(--surface)",    paddingInline: 20,    paddingBlock: 16,  },  accent: { color: "var(--accent)" },  muted: { color: "var(--muted)" },  success: { color: "var(--success)" },});export function CustomStyles() {  return (    <div {...stylex.props(styles.row)}>      <Spinner xstyle={styles.accent} size="sm" />      <Spinner xstyle={styles.muted} size="md" />      <Spinner xstyle={styles.success} size="lg" />    </div>  );}export default CustomStyles;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Global CSS

To customize the Spinner component classes, you can use the @layer components directive. Learn more.

@layer components {  .spinner {    @apply animate-spin;  }
  .spinner--accent {    color: var(--accent);  }}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Spinner component uses these CSS classes (View source styles):

Base & Size Classes [!toc]

  • .spinner - Base spinner styles with default size
  • .spinner--sm - Small size variant
  • .spinner--md - Medium size variant (default)
  • .spinner--lg - Large size variant
  • .spinner--xl - Extra large size variant

Color Classes [!toc]

  • .spinner--current - Inherits current text color
  • .spinner--accent - Accent color variant
  • .spinner--danger - Danger color variant
  • .spinner--success - Success color variant
  • .spinner--warning - Warning color variant

API Reference

Spinner

PropTypeDefaultDescription
size"sm" | "md" | "lg" | "xl""md"Size of the spinner
color"current" | "accent" | "success" | "warning" | "danger""accent"Color variant of the spinner
classNamestring-Additional CSS classes