@vibe-labs/design-components-spinners

Spinner and skeleton loading component tokens, styles, and TypeScript types for the Vibe Design System.

Usage

@import "@vibe-labs/design-components-spinners";

import { SpinnerSizes, SpinnerColors, SkeletonShapes } from "@vibe-labs/design-components-spinners/types";
import type { SpinnerStyleProps, SkeletonStyleProps } from "@vibe-labs/design-components-spinners/types";

Contents

Tokens (spinners.css)

CSS custom properties defined in @layer vibe.tokens:

Spinner

Token	Value	Description
--spinner-xs	0.75rem	Inline text size
--spinner-sm	1rem	Aligns with btn-sm icon area
--spinner-md	1.5rem	Aligns with btn-md icon area
--spinner-lg	2rem	Aligns with btn-lg icon area
--spinner-xl	3rem	Page/section loading
--spinner-width	2px	Border width (xs–md)
--spinner-width-lg	3px	Border width (lg)
--spinner-width-xl	4px	Border width (xl)
--spinner-color	--color-accent	Spinning arc color
--spinner-track-color	transparent	Track color
--spinner-speed	0.6s	Rotation duration

Skeleton

Token	Default	Description
--skeleton-base	--surface-elevated	Placeholder background
--skeleton-highlight	--surface-overlay	Shimmer highlight
--skeleton-radius	--radius-sm	Default border radius
--skeleton-speed	1.5s	Shimmer animation duration

Generated Styles (spinners.g.css)

Component classes generated into @layer vibe.components.

Spinner

• spinner — border-based rotating circle (border-top colored)
• Sizes: xs · sm · md · lg · xl (default: md, border width scales at lg/xl)
• Colors: accent · white · muted · success · danger · current (inherits from parent)

Spinner Layout

• spinner-wrap — inline-flex container with gap, stacked modifier for vertical layout
• spinner-overlay — absolute positioned scrim overlay with centered spinner

Skeleton

• skeleton — block placeholder with shimmer ::after animation
• Shapes: text (0.75em, full width) · heading (1.5em, 60% width) · circle (aspect-ratio 1) · rect (16:9 aspect)
• Sizes: xs (1rem) · sm (1.5rem) · md (2.5rem) · lg (4rem) · xl (8rem)
• static modifier — disables shimmer animation

Keyframes

• vibe-shimmer — translateX sweep for skeleton highlight

TypeScript Types (types/)

SpinnerSizes; // ["xs", "sm", "md", "lg", "xl"]
SpinnerColors; // ["accent", "white", "muted", "success", "danger", "current"]
SkeletonShapes; // ["text", "heading", "circle", "rect"]
SkeletonSizes; // ["xs", "sm", "md", "lg", "xl"]

interface SpinnerStyleProps {
  size?: SpinnerSize;
  color?: SpinnerColor;
}
interface SpinnerWrapStyleProps {
  stacked?: boolean;
}
interface SpinnerOverlayStyleProps {}
interface SkeletonStyleProps {
  shape?: SkeletonShape;
  size?: SkeletonSize;
  static?: boolean;
}

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
spinners.css	Token definitions
spinners.g.css	Generated component styles + keyframes
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (colors, surfaces, borders, spacing, transitions, overlays, z-index).

Build

npm run build