Spinner

Solidtype_heroui.Spinner is a <span role="status"> named “Loading”, with the classes HeroUI’s own spinnerVariants gives, that draws HeroUI’s spinning icon. Its gradients take ids of their own from Solid’s createUniqueId, so two spinners on a page never share one, and a prerendered page hydrates with the same ids. A spinner has no behaviour, so no Kobalte component underlies it.

Usage

spinner_usage.mlx

module Spinner = Solidtype_heroui.Spinner

let make () = <div class_="flex items-center gap-4"><Spinner /></div>

Examples

Colors

Current

Accent

Success

Warning

Danger

spinner_colors.mlx

module Spinner = Solidtype_heroui.Spinner

let make () =
  <div class_="flex items-center gap-8">
    <div class_="flex flex-col items-center gap-2">
      <Spinner color=`current />
      <span class_="text-xs text-muted">"Current"</span>
    </div>
    <div class_="flex flex-col items-center gap-2">
      <Spinner color=`accent />
      <span class_="text-xs text-muted">"Accent"</span>
    </div>
    <div class_="flex flex-col items-center gap-2">
      <Spinner color=`success />
      <span class_="text-xs text-muted">"Success"</span>
    </div>
    <div class_="flex flex-col items-center gap-2">
      <Spinner color=`warning />
      <span class_="text-xs text-muted">"Warning"</span>
    </div>
    <div class_="flex flex-col items-center gap-2">
      <Spinner color=`danger />
      <span class_="text-xs text-muted">"Danger"</span>
    </div>
  </div>

Sizes

Small

Medium

Large

Extra Large

spinner_sizes.mlx

module Spinner = Solidtype_heroui.Spinner

let make () =
  <div class_="flex items-center gap-8">
    <div class_="flex flex-col items-center gap-2">
      <Spinner size=`sm /> <span class_="text-xs text-muted">"Small"</span>
    </div>
    <div class_="flex flex-col items-center gap-2">
      <Spinner size=`md /> <span class_="text-xs text-muted">"Medium"</span>
    </div>
    <div class_="flex flex-col items-center gap-2">
      <Spinner size=`lg /> <span class_="text-xs text-muted">"Large"</span>
    </div>
    <div class_="flex flex-col items-center gap-2">
      <Spinner size=`xl />
      <span class_="text-xs text-muted">"Extra Large"</span>
    </div>
  </div>

Speed

An animation utility changes how fast one spinner turns; with motion-reduce:animate-none, it stays still for a reader who prefers reduced motion.

Slow

Default

Fast

spinner_speed.mlx

module Spinner = Solidtype_heroui.Spinner

let make () =
  <div class_="flex items-center gap-8">
    <div class_="flex flex-col items-center gap-2">
      <Spinner
        class_="animate-[spin_1.5s_linear_infinite] motion-reduce:animate-none"
      />
      <span class_="text-xs text-muted">"Slow"</span>
    </div>
    <div class_="flex flex-col items-center gap-2">
      <Spinner /> <span class_="text-xs text-muted">"Default"</span>
    </div>
    <div class_="flex flex-col items-center gap-2">
      <Spinner
        class_="animate-[spin_0.4s_linear_infinite] motion-reduce:animate-none"
      />
      <span class_="text-xs text-muted">"Fast"</span>
    </div>
  </div>

Customization

Tailwind CSS

class_ is added after HeroUI’s classes.

spinner_tailwind.mlx

module Spinner = Solidtype_heroui.Spinner

let make () =
  <div
    class_="flex items-center gap-4 rounded-xl border border-border bg-surface \
            px-5 py-4">
    <Spinner class_="text-accent" size=`sm />
    <Spinner class_="text-muted" size=`md />
    <Spinner class_="text-success" size=`lg />
  </div>

Global CSS

HeroUI’s classes are global, so a stylesheet restyles every spinner, as with HeroUI in React:

@layer components {
  .spinner {
    @apply animate-spin;
  }

  .spinner--accent {
    color: var(--accent);
  }
}

Styling Reference

CSS Classes

• .spinner, and its sizes .spinner--sm, .spinner--md, .spinner--lg, .spinner--xl
• its colors .spinner--current, .spinner--accent, .spinner--danger, .spinner--success, .spinner--warning

API Reference

Each prop beside the name HeroUI’s React component gives it.

Spinner

React	solidtype	Type	Default	Description
size	size	[ `sm | `md | `lg | `xl ]	`md	Its size
color	color	[ `accent | `current | `danger | `success | `warning ]	`accent	Its color
aria-label	aria_label	string	"Loading"	Its name
className	class_	string		Added after HeroUI’s classes

Beside React

Original HeroUI documentation: Spinner.

The same HeroUI Spinner twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two spinners: a marked row is one they disagree on.

solidtype — OCaml, on Solid and Kobalte

React — TypeScript, on React Aria

attribute	solidtype	React