Motion loader

Overview

TxMotionLoader preserves the 134 named Amicro loading implementations and the three additional CSS loaders. Each variant has its own source geometry, trajectory, phase offsets and cadence. The catalog below keeps the original IDs and exported names. This is an indeterminate loading indicator; it never reports business completion.

The root is a polite status region with a stable accessible label. Animated artwork is hidden from assistive technology. Playback requires playing=true, a mounted visible component, a visible document and no reduced-motion preference. When any gate closes, native animations are cancelled and readable static artwork remains. Resuming starts the source rhythm again.

Usage

All named scenes

Filter the complete catalog, control each scene or all scenes, and adjust size, speed and localized status text. All 137 entries are mounted in the scrollable catalog; entries outside the viewport do not animate.

Controlled playback

playing requests playback; visibility and reduced-motion settings still take priority. Change the source ID to switch geometry. The previous scene is disposed before the next scene starts.

<script setup lang="ts">
import { ref } from 'vue'
import { TxMotionLoader } from '@talex-touch/tuffex'

const playing = ref(true)
</script>

<template>
  <TxMotionLoader variant="wave-physics-loader" :playing="playing" />
  <button type="button" @click="playing = !playing">Toggle playback</button>
</template>

Best Practices

• Prefer TxSkeleton or TxRowSkeleton for first-load content placeholders. Choose a motion loader for a short indeterminate wait whose geometry suits the surface.
• Keep playing tied to actual pending work. Pausing an animation does not mean the request has completed, so the status region remains busy.
• Supply label and labels for the host locale. The text variants use those labels, including per-character wave and pop scenes.
• Use TxProgressBar when progress is known. No loader simulates percentages or succeeds after a timer.
• Keep speed moderate and let the component own offscreen, hidden-page, KeepAlive and reduced-motion suspension.

API Reference

Props

Labels

Events

No component-specific events. The host controls pending work and the playing prop.

Slots

No slots. Textual scene content comes from labels; generic artwork is not substituted for missing content.

Exports

• TxMotionLoader and the installed MotionLoader component.
• MOTION_LOADER_VARIANTS: readonly tuple enumerating all 137 source IDs; MotionLoaderVariant is derived from that tuple.
• MOTION_LOADER_SOURCES: typed records containing each id, original exported name and pinned upstream source path.
• MotionLoaderProps, MotionLoaderLabels, MotionLoaderSize, MotionLoaderSource and TxMotionLoaderInstance.

Source mapping

Sources are pinned to Amicro commit 43c29ce9cdd16459e3eab4992381b8d35b38776a under the MIT license, Copyright (c) 2026 SYED SUBHAN UDDIN. The table records source motion values and per-node phases, not animation inferred from a name. Native spin utilities retain their one-second linear revolution. Omitted source easing uses the source's default ease-out.

Technologies

Source declarations render native HTML/SVG without React, Framer Motion or Tailwind runtime. Web Animations preserves separate property tracks, explicit keyframe stops and staggered delays. Spring-marked scenes use the shared TuffEx resolveTransition compiler. Text changes use TxTextMorph; Skeleton, SkeletonLoader and FluidSkeleton compose the existing TxSkeleton geometry without a second unmanaged skeleton loop.

WavePhysicsLoader retains 15 bars, 201 sampled phases, four parabolic bounces per crossing, the cosine influence radius, impact indentation and ball squash/stretch. Its four-second round trip is not replaced by a generic wave. The 292px source scene has a 0.38 native presentation scale before the public size multiplier.

TextDots retains its three source stop lists: [0, 0.2, 0.8, 1], [0, 0.4, 0.8, 1] and [0, 0.6, 0.8, 1]. MatrixGridLoader retains [0, 0.5, 0.75, 1] with the four delays 0.2, 0.4, 0.8 and 0.6 seconds. AppleEqualizer freezes the source's random delay samples to 0.06, 0.41, 0.19 and 0.32 seconds for deterministic SSR rather than generating a new random rhythm during hydration. Colors use theme tokens; SVG goo filter IDs use Vue's hydration-stable useId().

The shared useMotionActivity owns visibility, reduced-motion and KeepAlive lifecycle gates. Each scene owns and cancels its native animations on suspension, source replacement and unmount. Browsers without Web Animations retain the same static artwork.