lunaDOM Docs
lunaDOM Docs

lunaDOM is a collection of lightweight, accessible shadowdom based web components built with JavaScript.

v0.0.25

Spinner

Loading spinner with customizable size, color, and speed.

The <luna-spinner> component displays a loading spinner with customizable appearance.

Paths

/lunadom/components/spinner/spinner.js REQUIRED

Sizes

Sizes (16, 32, 48)

Colors

Custom Colors & Track Width

Speed

Speeds (Slow, Fast)

Customization

Attributes
size - The diameter of the spinner in pixels. Defaults to 24.
track-width - The thickness of the spinner stroke in pixels. Defaults to 2.
color - The color of the spinning arc. Overrides --luna-spinner-color.
track-color - The color of the stationary track. Overrides --luna-spinner-track-color.
speed - The duration of one rotation in seconds. Defaults to 1.
CSS Variables
--luna-spinner-track-width - The thickness of the spinner stroke.
--luna-spinner-color - The color of the spinning arc.
--luna-spinner-track-color - The color of the stationary track.
--luna-spinner-speed - The rotation speed.

Example Code

<!-- Sizes --> <luna-spinner size="16"></luna-spinner> <luna-spinner size="32"></luna-spinner> <luna-spinner size="48"></luna-spinner> <!-- Custom Colors --> <luna-spinner color="#3b82f6" track-color="rgba(59, 130, 246, 0.1)" > </luna-spinner> <luna-spinner color="#22c55e" track-color="rgba(34, 197, 94, 0.1)" > </luna-spinner> <luna-spinner color="#f59e0b" track-width="4" > </luna-spinner> <!-- Speed Control --> <luna-spinner speed="2"></luna-spinner> <luna-spinner speed="0.5"></luna-spinner>