Spinner — Primitives

Spinners

Canonical reference for Vanduo loading spinners: border spinner, dot bounce, growing pulse, sizes and color modifiers, plus the signature quad-grid loader (.vd-dynamic-loader*). Styles ship in framework/css/components/spinner.css, imported by the main vanduo.css bundle — copy HTML only; no extra layout CSS is required. For loading UX patterns (progress handoff, placeholders), see Preloader.

Border Spinner

Sizes

Colors

Inside buttons

<!-- Sizes -->
<div class="vd-spinner vd-spinner-xs"></div>
<div class="vd-spinner vd-spinner-sm"></div>
<div class="vd-spinner"></div>
<div class="vd-spinner vd-spinner-lg"></div>
<div class="vd-spinner vd-spinner-xl"></div>

<!-- Colors -->
<div class="vd-spinner vd-spinner-success"></div>
<div class="vd-spinner vd-spinner-warning"></div>
<div class="vd-spinner vd-spinner-error"></div>
<div class="vd-spinner vd-spinner-info"></div>
<div class="vd-spinner vd-spinner-light"></div>
<div class="vd-spinner vd-spinner-dark"></div>

<!-- Inside button -->
<button class="vd-btn vd-btn-primary" disabled>
  <span class="vd-spinner vd-spinner-sm"
        style="border-color:rgba(255,255,255,0.3);
               border-top-color:#fff;">
  </span>
  Loading...
</button>

Dots & Growing Spinner

Dot bounce

Growing pulse

Centering helper

<!-- Dot bounce spinner -->
<div class="vd-spinner-dots"><span></span></div>

<!-- Growing pulse spinner -->
<div class="vd-spinner-grow vd-spinner-sm"></div>
<div class="vd-spinner-grow"></div>
<div class="vd-spinner-grow vd-spinner-lg"
     style="--vd-spinner-color:var(--vd-color-success);"></div>

<!-- Centered loader area -->
<div class="vd-spinner-center">
  <div class="vd-spinner vd-spinner-lg"></div>
</div>

Quad Loader (Signature Vanduo Loader)

The grid applies staggered rotation via .vd-dynamic-loader-grid (nth-child delays in CSS). Optional inline animation-delay overrides are only needed if you want custom rhythm.

Loading your workspace...

Overlay on a skeleton card

Please wait...

<!-- Quad loader -->
<div class="vd-dynamic-loader">
  <div class="vd-dynamic-loader-grid">
    <div class="vd-spinner vd-spinner-sm"
         style="--vd-spinner-color:var(--vd-color-primary);"></div>
    <div class="vd-spinner vd-spinner-sm"
         style="--vd-spinner-color:var(--vd-color-secondary);"></div>
    <div class="vd-spinner vd-spinner-sm"
         style="--vd-spinner-color:var(--vd-color-success);"></div>
    <div class="vd-spinner vd-spinner-sm"
         style="--vd-spinner-color:var(--vd-color-warning);"></div>
  </div>
  <div class="vd-dynamic-loader-text">Loading...</div>
</div>

<!-- Overlay on skeleton card -->
<div class="vd-dynamic-loader-card">
  <div class="vd-dynamic-loader">...</div>
  <!-- skeleton placeholders underneath -->
  <div class="vd-skeleton vd-skeleton-text"></div>
</div>

CSS Variables

Variable	Default	Description
`--vd-spinner-size`	`2rem`	Default spinner diameter
`--vd-spinner-border-width`	`3px`	Border spinner track thickness
`--vd-spinner-color`	`var(--vd-color-primary)`	Active/accent color
`--vd-spinner-speed`	`0.65s`	Rotation duration

API Reference

Usage

<script setup lang="ts">
import { VdSpinner } from "@vanduo-oss/vd3";
</script>

<template>
  <VdSpinner />
  <VdSpinner size="lg" label="Loading…" />
</template>

CSS Classes

Class	Description
`.vd-spinner`	Border spinner — a rotating circular border. Default size 2rem.
`.vd-spinner-xs`	1rem diameter, 2px border.
`.vd-spinner-sm`	1.5rem diameter, 2px border.
`.vd-spinner-lg`	3rem diameter, 4px border.
`.vd-spinner-xl`	4rem diameter, 5px border.
`.vd-spinner-success`	Green accent color.
`.vd-spinner-warning`	Amber accent color.
`.vd-spinner-error`	Red accent color.
`.vd-spinner-info`	Cyan accent color.
`.vd-spinner-light`	White accent (for dark backgrounds).
`.vd-spinner-dark`	Dark text color accent.
`.vd-spinner-dots`	Three bouncing dots loader.
`.vd-spinner-grow`	Pulsing circle that grows and fades in a loop.
`.vd-spinner-center`	Flex container that centers a spinner with padding.
`.vd-dynamic-loader`	Signature 2x2 quad spinner grid with label.
`.vd-dynamic-loader-grid`	The 2x2 CSS grid of spinners.
`.vd-dynamic-loader-text`	Muted label below the quad grid.
`.vd-dynamic-loader-card`	Relative container that hosts a full-cover .vd-dynamic-loader overlay.

Component API (Vue 3)

Prop	Description
`:size`	sm \| md \| lg (default md).
`:label`	Accessible label (visually-hidden text for screen readers).

Accessibility

Always include an aria-label or visually-hidden text describing the loading state: <div class="vd-spinner" aria-label="Loading..."></div>.
When used inside buttons, the button itself should have aria-disabled="true" or disabled to prevent repeated submissions.
For page-level loading (quad loader), wrap it in an element with role="status" and aria-live="polite" so screen readers announce the loading state.
Spinners are decorative for sighted users but meaningful for screen reader users — never omit the accessible name.
Animations slow down to 1.5s when prefers-reduced-motion: reduce is active to minimize vestibular discomfort.