Motion Loader

A spinner that is really a gallery. Twelve variants — orbit, newton-cradle, pendulum, hourglass, morph-ring, square-snake, comet, radar, cube-flip, wave-bars, breathing-glow and dot-ring — each built from a hand-tuned set of rotations, scales and staggered delays rather than a shared skeleton.

Every variant draws with currentColor and inline pixel styles, so one color prop themes the whole thing and size is the only geometry input: the root is size × size, shrink-0, relative, and every sub-element is positioned against it.

variant selects a v-if branch, so switching between loaders remounts the subtree and restarts the animation from the first frame.

Usage

<template>
  <div class="flex w-full max-w-md flex-col gap-6">
    <div class="flex items-center justify-center gap-6 rounded-2xl border border-default bg-default py-10">
      <MMotionLoader
        :variant="variant"
        :size="56"
        :speed="speed"
        color="var(--ui-primary)"
      />
      <span class="text-sm text-muted">
        {{ variant }}
      </span>
    </div>

    <div class="grid grid-cols-2 gap-3">
      <USelect
        v-model="variant"
        :items="variants"
      />
      <USelect
        v-model="speed"
        :items="speedItems"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const variant = ref('orbit')
const speed = ref(1)

const variants = [
  'orbit',
  'newton-cradle',
  'pendulum',
  'hourglass',
  'morph-ring',
  'square-snake',
  'comet',
  'radar',
  'cube-flip',
  'wave-bars',
  'breathing-glow',
  'dot-ring',
]

const speedItems = [
  { label: '0.5×', value: 0.5 },
  { label: '1×', value: 1 },
  { label: '2×', value: 2 },
]
</script>

size is a plain number in pixels — there is no named size scale, unlike GridLoader. The loader is inline-flex and shrink-0, so it sits inside a button or a flex row without being squeezed.

Customize

Props

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.motionLoader in app.config.ts.

Accessibility

The root is a <span role="status" aria-live="polite"> with aria-label set from label. Live regions announce on content change, and this loader's content never changes — the practical effect is that the label is exposed when the loader enters the accessibility tree, and repeated mounts announce again. That is the behaviour you want for a spinner: the user learns something is happening without being interrupted mid-sentence.

Everything inside is a decorative span with no text, so nothing is announced twice.

Reduced motion is fully handled. The component subscribes to (prefers-reduced-motion: reduce) with useMediaQuery — a reactive watcher, not a one-shot read — and every animate and transition binding becomes undefined when it matches. The loader then renders its static first frame rather than animating, and it updates if the user changes the setting while the page is open. That is better than the check GridLoader does.

There is no keyboard interaction, which is correct for a non-interactive indicator.

Performance

• All twelve variants animate only rotate, rotateX, rotateY, scale, scaleY, opacity and x/y — every one is a compositor property, and no variant triggers layout or paint.
• The multi-element variants mount a fixed number of spans: 5 for newton-cradle, 5 for wave-bars, 8 for dot-ring, 4 for square-snake, 4 for the comet trail.
• Staggered variants (wave-bars, dot-ring) build a fixed Array.from({ length }) once at module scope, then index it — no per-frame allocation.
• snakePositions and snakeTravel are computed from size, so changing the size recomputes four positions rather than restarting the loop.
• Every variant uses repeat: Number.POSITIVE_INFINITY with repeatType: 'loop', so there is no teardown to manage — the animations stop when the component unmounts.