---
title: "Motion loader"
description: "137 source-defined loading scenes with independent playback, localization and visibility-aware motion."
category: MotionLoaders
status: beta
since: 0.6.3
tags: [motion, loading, animation]
syncStatus: reviewed
verified: false
---
## 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.
:::TuffDemoWrapper{demo="MotionLoaderDemo" code-lang="vue"}
---
code: |
---
:::
### 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.
```vue
```
### 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
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `MotionLoaderVariant` | `'classic-spinner'` | Exact source ID from the 137-entry catalog below. |
| `playing` | `boolean` | `true` | Requests playback. False cancels all native tracks and leaves readable static artwork. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` | Source-geometry scale: 0.65, 0.85, 1 and 1.25. Aspect ratios and phase distances stay source-defined. |
| `speed` | `number` | `1` | Positive playback-rate multiplier. Non-finite or non-positive values use 1. |
| `label` | `string` | `labels.loading` | Accessible status name and visible status copy; independent of the artwork's words. |
| `labels` | `MotionLoaderLabels` | See below | Localized words for textual scenes and paused status. |
| `showLabel` | `boolean` | `true` | Shows status text. False visually clips it without removing it from the accessibility tree. |
#### Labels
| Key | Default | Used by |
| --- | --- | --- |
| `loading` | `'Loading'` | Status copy, AppleTextReveal, Typing, TextMorph and SpringTextPop. SpringTextPop appends the source's three dots. |
| `thinking` | `'Thinking'` | TextBlink, TextDots, TextShimmer and TextShimmerWave. |
| `waiting` | `'Wait'` | The second TextMorph layer. |
| `unlock` | `'Slide to unlock'` | Both AppleUnlock shimmer layers. |
| `terminal` | `'loading...'` | TerminalLoader's command text; cursor and prompt keep their source geometry. |
| `paused` | `'Paused'` | Status text when `playing=false`. |
### 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.
| Variant ID | Original export | Pinned source | Source trajectory / cadence |
| --- | --- | --- | --- |
| `accordion-loader` | AccordionLoader | [`registry/ui/loading/accordion-loader.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/accordion-loader.tsx) | scaleX=[1,0.2,1] · 1.5s/easeInOut
scaleX=[1,0.2,1] · 1.5s/easeInOut, phase 0.15s
scaleX=[1,0.2,1] · 1.5s/easeInOut, phase 0.3s
scaleX=[1,0.2,1] · 1.5s/easeInOut, phase 0.45s |
| `app-icon-load` | AppIconLoad | [`registry/ui/loading/app-icon-load.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/app-icon-load.tsx) | strokeDashoffset=[125,0] · 2s/easeInOut |
| `apple-breathe` | AppleBreathe | [`registry/ui/loading/apple-breathe.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-breathe.tsx) | scale=[1,1.75,1]; x=[0,11,0]; y=[0,0,0] · 3.6s/easeInOut
scale=[1,1.75,1]; x=[0,5.5,0]; y=[0,9.526279,0] · 3.6s/easeInOut
scale=[1,1.75,1]; x=[0,-5.5,0]; y=[0,9.526279,0] · 3.6s/easeInOut
scale=[1,1.75,1]; x=[0,-11,0]; y=[0,0,0] · 3.6s/easeInOut
scale=[1,1.75,1]; x=[0,-5.5,0]; y=[0,-9.526279,0] · 3.6s/easeInOut
scale=[1,1.75,1]; x=[0,5.5,0]; y=[0,-9.526279,0] · 3.6s/easeInOut |
| `apple-equalizer` | AppleEqualizer | [`registry/ui/loading/apple-equalizer.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-equalizer.tsx) | height=["20%","100%","20%"] · 0.8s/circInOut, phase 0.06s
height=["20%","100%","20%"] · 0.8s/circInOut, phase 0.41s
height=["20%","100%","20%"] · 0.8s/circInOut, phase 0.19s
height=["20%","100%","20%"] · 0.8s/circInOut, phase 0.32s |
| `apple-icon-morph` | AppleIconMorph | [`registry/ui/loading/apple-icon-morph.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-icon-morph.tsx) | borderRadius=["20%","50%","50%","20%"]; rotate=[0,90,180,270] · 2s/easeInOut |
| `apple-pulse-dots` | ApplePulseDots | [`registry/ui/loading/apple-pulse-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-pulse-dots.tsx) | scale=[0.5,1,0.5]; opacity=[0.3,1,0.3] · 1.2s/easeInOut
scale=[0.5,1,0.5]; opacity=[0.3,1,0.3] · 1.2s/easeInOut, phase 0.15s
scale=[0.5,1,0.5]; opacity=[0.3,1,0.3] · 1.2s/easeInOut, phase 0.3s |
| `anim-apple-spinner` | AppleRadialSpinner | [`src/components/css-animations/whimsical/AppleLoaders.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/src/components/css-animations/whimsical/AppleLoaders.tsx) | opacity=[1,0.15] · 0.8s/linear, phase -0.8s
opacity=[1,0.15] · 0.8s/linear, phase -0.7s
opacity=[1,0.15] · 0.8s/linear, phase -0.6s
opacity=[1,0.15] · 0.8s/linear, phase -0.5s
opacity=[1,0.15] · 0.8s/linear, phase -0.4s
opacity=[1,0.15] · 0.8s/linear, phase -0.3s
opacity=[1,0.15] · 0.8s/linear, phase -0.2s
opacity=[1,0.15] · 0.8s/linear, phase -0.1s |
| `apple-scale-pulse` | AppleScalePulse | [`registry/ui/loading/apple-scale-pulse.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-scale-pulse.tsx) | scale=[0,1]; opacity=[1,0] · 1.5s/easeOut
scale=[0,1]; opacity=[1,0] · 1.5s/easeOut, phase 0.5s |
| `apple-sound-wave` | AppleSoundWave | [`registry/ui/loading/apple-sound-wave.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-sound-wave.tsx) | height=[4,8,4] · 1s/easeInOut
height=[4,16,4] · 1s/easeInOut, phase 0.1s
height=[4,24,4] · 1s/easeInOut, phase 0.2s
height=[4,16,4] · 1s/easeInOut, phase 0.3s
height=[4,8,4] · 1s/easeInOut, phase 0.4s |
| `apple-text-reveal` | AppleTextReveal | [`registry/ui/loading/apple-text-reveal.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-text-reveal.tsx) | y=["100%","0%","-100%"] · 2s/easeInOut |
| `apple-unlock` | AppleUnlock | [`registry/ui/loading/apple-unlock.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/apple-unlock.tsx) | backgroundPosition=["200% 0","-200% 0"] · 2.2s/linear |
| `arc-tracer` | ArcTracer | [`registry/ui/loading/arc-tracer.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/arc-tracer.tsx) | strokeDashoffset=[125,0,-125] · 2s/easeInOut |
| `bar-cascade` | BarCascade | [`registry/ui/loading/bar-cascade.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bar-cascade.tsx) | height=["8px","24px","8px"] · 1s/easeInOut
height=["8px","24px","8px"] · 1s/easeInOut, phase 0.1s
height=["8px","24px","8px"] · 1s/easeInOut, phase 0.2s
height=["8px","24px","8px"] · 1s/easeInOut, phase 0.3s
height=["8px","24px","8px"] · 1s/easeInOut, phase 0.4s |
| `bar-sweep` | BarSweep | [`registry/ui/loading/bar-sweep.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bar-sweep.tsx) | x=[0,24,0] · 1.5s/easeInOut |
| `bobbing-dots` | BobbingDots | [`registry/ui/loading/bobbing-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bobbing-dots.tsx) | y=[0,-10,0] · 1.2s/easeInOut
y=[0,-10,0] · 1.2s/easeInOut, phase 0.15s
y=[0,-10,0] · 1.2s/easeInOut, phase 0.3s |
| `bounce-dots` | BounceDots | [`registry/ui/loading/bounce-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bounce-dots.tsx) | y=[0,-8,0] · 0.6s/easeInOut
y=[0,-8,0] · 0.6s/easeInOut, phase 0.1s
y=[0,-8,0] · 0.6s/easeInOut, phase 0.2s |
| `bouncing-bars` | BouncingBars | [`registry/ui/loading/bouncing-bars.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bouncing-bars.tsx) | scaleY=[0.3,1,0.3] · 1s/easeInOut
scaleY=[0.3,1,0.3] · 1s/easeInOut, phase 0.2s
scaleY=[0.3,1,0.3] · 1s/easeInOut, phase 0.4s |
| `bouncing-dots` | BouncingDots | [`registry/ui/loading/bouncing-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bouncing-dots.tsx) | y=[0,-20,0]; scaleY=[0.8,1.1,0.8] · 0.8s/easeInOut
y=[0,-20,0]; scaleY=[0.8,1.1,0.8] · 0.8s/easeInOut, phase 0.1s
y=[0,-20,0]; scaleY=[0.8,1.1,0.8] · 0.8s/easeInOut, phase 0.2s |
| `bouncing-lines` | BouncingLines | [`registry/ui/loading/bouncing-lines.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bouncing-lines.tsx) | scaleX=[0.3,1,0.3] · 1s/easeInOut
scaleX=[0.3,1,0.3] · 1s/easeInOut, phase 0.2s
scaleX=[0.3,1,0.3] · 1s/easeInOut, phase 0.4s |
| `bouncing-square` | BouncingSquare | [`registry/ui/loading/bouncing-square.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/bouncing-square.tsx) | y=[0,-24,0]; scaleY=[0.8,1.1,0.8]; scaleX=[1.2,0.9,1.2] · 0.6s/easeInOut |
| `breathe-ring` | BreatheRing | [`registry/ui/loading/breathe-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/breathe-ring.tsx) | scale=[0.8,1.1,0.8]; borderWidth=[6,2,6] · 3s/easeInOut |
| `breathing-glow` | BreathingGlow | [`registry/ui/loading/breathing-glow.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/breathing-glow.tsx) | scale=[1,1.5,1]; opacity=[0.5,0.8,0.5] · 2s/easeInOut |
| `breathing-square` | BreathingSquare | [`registry/ui/loading/breathing-square.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/breathing-square.tsx) | scale=[1,1.2,1]; borderRadius=["0%","50%","0%"]; rotate=[0,90,180] · 2s/easeInOut |
| `circular-bars` | CircularBars | [`registry/ui/loading/circular-bars.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/circular-bars.tsx) | scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut
scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut, phase 0.15s
scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut, phase 0.3s
scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut, phase 0.45s
scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut, phase 0.6s
scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut, phase 0.75s
scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut, phase 0.9s
scaleY=[0.5,1.5,0.5] · 1.2s/easeInOut, phase 1.05s |
| `classic-spinner` | ClassicSpinner | [`registry/ui/loading/classic-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/classic-spinner.tsx) | opacity=[1,0.2] · 1s/linear
opacity=[1,0.2] · 1s/linear, phase 0.083s
opacity=[1,0.2] · 1s/linear, phase 0.167s
opacity=[1,0.2] · 1s/linear, phase 0.25s
opacity=[1,0.2] · 1s/linear, phase 0.333s
opacity=[1,0.2] · 1s/linear, phase 0.417s
opacity=[1,0.2] · 1s/linear, phase 0.5s
opacity=[1,0.2] · 1s/linear, phase 0.583s
opacity=[1,0.2] · 1s/linear, phase 0.667s
opacity=[1,0.2] · 1s/linear, phase 0.75s
opacity=[1,0.2] · 1s/linear, phase 0.833s
opacity=[1,0.2] · 1s/linear, phase 0.917s |
| `clock-spinner` | ClockSpinner | [`registry/ui/loading/clock-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/clock-spinner.tsx) | rotate=360 · 2s/linear
rotate=360 · 12s/linear |
| `comet-spinner` | CometSpinner | [`registry/ui/loading/comet-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/comet-spinner.tsx) | rotate=360 · 1s/linear |
| `concentric-pulse` | ConcentricPulse | [`registry/ui/loading/concentric-pulse.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/concentric-pulse.tsx) | width=48; height=48; opacity=0 · 2s/easeOut, phase 0.6s
width=48; height=48; opacity=0 · 2s/easeOut, phase 1.2s
width=48; height=48; opacity=0 · 2s/easeOut, phase 1.8s |
| `concentric-ring` | ConcentricRing | [`registry/ui/loading/concentric-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/concentric-ring.tsx) | rotate=360 · 2s/linear
rotate=-360 · 1.5s/linear
rotate=360 · 1s/linear |
| `concentric-squares` | ConcentricSquares | [`registry/ui/loading/concentric-squares.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/concentric-squares.tsx) | rotate=[0,90,90]; scale=[1,1,0.8,1] · 2s/easeInOut
rotate=[0,-90,-90]; scale=[1,1,1.2,1] · 2s/easeInOut |
| `conveyor-loop` | ConveyorLoop | [`registry/ui/loading/conveyor-loop.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/conveyor-loop.tsx) | x=[0,-32] · 1s/linear |
| `cross-spinner` | CrossSpinner | [`registry/ui/loading/cross-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/cross-spinner.tsx) | rotate=[0,90,180,270,360] · 2s/easeInOut |
| `cube-flip-spring` | CubeFlipSpring | [`registry/ui/loading/cube-flip-spring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/cube-flip-spring.tsx) | rotateX=[0,180,180]; rotateY=[0,0,180] · 2s/spring, bounce=0.2 |
| `dash-ring` | DashRing | [`registry/ui/loading/dash-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/dash-ring.tsx) | rotate=360 · 4s/linear |
| `dashed-spiral` | DashedSpiral | [`registry/ui/loading/dashed-spiral.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/dashed-spiral.tsx) | rotate=360; scale=[1,1.1,1] · 4s/linear |
| `diamond-grid` | DiamondGrid | [`registry/ui/loading/diamond-grid.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/diamond-grid.tsx) | scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.2s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.4s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.6s |
| `diamond-rotate-spring` | DiamondRotateSpring | [`registry/ui/loading/diamond-rotate-spring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/diamond-rotate-spring.tsx) | rotate=[45,135,225,315] · 2s/spring, bounce=0.4 |
| `dot-spinner` | DotSpinner | [`registry/ui/loading/dot-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/dot-spinner.tsx) | opacity=[1,0.2] · 1s/linear
opacity=[1,0.2] · 1s/linear, phase 0.125s
opacity=[1,0.2] · 1s/linear, phase 0.25s
opacity=[1,0.2] · 1s/linear, phase 0.375s
opacity=[1,0.2] · 1s/linear, phase 0.5s
opacity=[1,0.2] · 1s/linear, phase 0.625s
opacity=[1,0.2] · 1s/linear, phase 0.75s
opacity=[1,0.2] · 1s/linear, phase 0.875s |
| `dots-ring` | DotsRing | [`registry/ui/loading/dots-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/dots-ring.tsx) | scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.15s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.3s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.45s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.6s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.75s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.9s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 1.05s |
| `double-ring` | DoubleRing | [`registry/ui/loading/double-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/double-ring.tsx) | rotate=360 · 1.5s/linear
rotate=-360 · 1s/linear |
| `drop-dot` | DropDot | [`registry/ui/loading/drop-dot.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/drop-dot.tsx) | y=[0,24,0]; scaleY=[1,1.2,1]; scaleX=[1,0.8,1] · 1s/circIn |
| `dual-arc` | DualArc | [`registry/ui/loading/dual-arc.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/dual-arc.tsx) | rotate=360; scale=[1,0.82,1] · (rotate 1.2s/linear, scale 1.2s/easeInOut) |
| `dynamic-island` | DynamicIsland | [`registry/ui/loading/dynamic-island.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/dynamic-island.tsx) | width=[80,110,80] · 2.2s/easeInOut
opacity=[0.4,1,0.4] · 1.1s/easeInOut
height=[3,8,3] · 0.8s/easeInOut
height=[3,8,3] · 0.8s/easeInOut, phase 0.15s
height=[3,8,3] · 0.8s/easeInOut, phase 0.3s |
| `elastic-bars` | ElasticBars | [`registry/ui/loading/elastic-bars.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/elastic-bars.tsx) | height=[8,36,8] · 1.1s/easeInOut
height=[8,36,8] · 1.1s/easeInOut, phase 0.15s
height=[8,36,8] · 1.1s/easeInOut, phase 0.3s |
| `elastic-square` | ElasticSquare | [`registry/ui/loading/elastic-square.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/elastic-square.tsx) | y=[0,-20,0]; scaleY=[0.7,1.2,0.7]; scaleX=[1.3,0.8,1.3] · 0.8s/easeInOut |
| `expanding-cross` | ExpandingCross | [`registry/ui/loading/expanding-cross.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/expanding-cross.tsx) | scaleX=[0.2,1,0.2] · 1.5s/easeInOut
scaleY=[0.2,1,0.2] · 1.5s/easeInOut, phase 0.75s |
| `face-id-scan` | FaceIDScan | [`registry/ui/loading/face-id-scan.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/face-id-scan.tsx) | top=["-100%","100%","-100%"] · 2.5s/linear |
| `fade-arc` | FadeArc | [`registry/ui/loading/fade-arc.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/fade-arc.tsx) | rotate=0→360 · 1s/linear |
| `fade-dots` | FadeDots | [`registry/ui/loading/fade-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/fade-dots.tsx) | opacity=[0,1,0] · 1.5s/linear
opacity=[0,1,0] · 1.5s/linear, phase 0.2s
opacity=[0,1,0] · 1.5s/linear, phase 0.4s
opacity=[0,1,0] · 1.5s/linear, phase 0.6s |
| `flip-square` | FlipSquare | [`registry/ui/loading/flip-square.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/flip-square.tsx) | rotateX=[0,180,180,0]; rotateY=[0,0,180,180] · 2s/easeInOut |
| `floating-diamonds` | FloatingDiamonds | [`registry/ui/loading/floating-diamonds.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/floating-diamonds.tsx) | y=[0,-10,0] · 1s/easeInOut
y=[0,-10,0] · 1s/easeInOut, phase 0.2s
y=[0,-10,0] · 1s/easeInOut, phase 0.4s |
| `fluid-bars` | FluidBars | [`registry/ui/loading/fluid-bars.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/fluid-bars.tsx) | rotate=[-15,15,-15]; scaleY=[0.8,1,0.8] · 1.5s/easeInOut
rotate=[-15,15,-15]; scaleY=[0.8,1,0.8] · 1.5s/easeInOut, phase 0.1s
rotate=[-15,15,-15]; scaleY=[0.8,1,0.8] · 1.5s/easeInOut, phase 0.2s
rotate=[-15,15,-15]; scaleY=[0.8,1,0.8] · 1.5s/easeInOut, phase 0.3s |
| `fluid-diamond` | FluidDiamond | [`registry/ui/loading/fluid-diamond.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/fluid-diamond.tsx) | scaleX=[1,1.5,1]; scaleY=[1,0.5,1] · 1.5s/easeInOut |
| `fluid-dot-orbit` | FluidDotOrbit | [`registry/ui/loading/fluid-dot-orbit.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/fluid-dot-orbit.tsx) | rotate=360 · 2s/linear |
| `fluid-skeleton` | FluidSkeleton | [`registry/ui/loading/fluid-skeleton.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/fluid-skeleton.tsx) | x=["-100%","200%"] · 1.5s/linear |
| `gears` | Gears | [`registry/ui/loading/gears.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/gears.tsx) | rotate=360 · 4s/linear
rotate=-360 · 3s/linear |
| `glassmorphic-card` | GlassmorphicCard | [`registry/ui/loading/glassmorphic-card.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/glassmorphic-card.tsx) | x=[-20,20,-20]; y=[-10,10,-10] · 3s/easeInOut
rotate=0→360 · 1s/linear |
| `gradient-arc` | GradientArc | [`registry/ui/loading/gradient-arc.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/gradient-arc.tsx) | rotate=360 · 1.2s/linear |
| `grid-dots` | GridDots | [`registry/ui/loading/grid-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/grid-dots.tsx) | scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.2s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.4s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.6s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.8s |
| `haptic-ring` | HapticRing | [`registry/ui/loading/haptic-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/haptic-ring.tsx) | rotate=[0,90,180,270,360] · 2s/spring, bounce=0.4 |
| `heartbeat` | Heartbeat | [`registry/ui/loading/heartbeat.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/heartbeat.tsx) | strokeDashoffset=[100,-100] · 2s/linear |
| `hexagon-spinner` | HexagonSpinner | [`registry/ui/loading/hexagon-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/hexagon-spinner.tsx) | strokeDashoffset=[120,-120] · 2s/linear |
| `hourglass` | Hourglass | [`registry/ui/loading/hourglass.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/hourglass.tsx) | rotate=[0,180,180,360,360] · 3s/easeInOut |
| `infinity-path` | InfinityPath | [`registry/ui/loading/infinity-path.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/infinity-path.tsx) | strokeDashoffset=[100,-100] · 2s/linear |
| `intersecting-rings` | IntersectingRings | [`registry/ui/loading/intersecting-rings.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/intersecting-rings.tsx) | rotateX=360; rotateY=180 · 2.2s/linear
rotateX=180; rotateY=360 · 2.2s/linear |
| `ios-spinner` | IOSSpinner | [`registry/ui/loading/ios-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/ios-spinner.tsx) | opacity=[1,0.2] · 1s/linear
opacity=[1,0.2] · 1s/linear, phase 0.083s
opacity=[1,0.2] · 1s/linear, phase 0.167s
opacity=[1,0.2] · 1s/linear, phase 0.25s
opacity=[1,0.2] · 1s/linear, phase 0.333s
opacity=[1,0.2] · 1s/linear, phase 0.417s
opacity=[1,0.2] · 1s/linear, phase 0.5s
opacity=[1,0.2] · 1s/linear, phase 0.583s
opacity=[1,0.2] · 1s/linear, phase 0.667s
opacity=[1,0.2] · 1s/linear, phase 0.75s
opacity=[1,0.2] · 1s/linear, phase 0.833s
opacity=[1,0.2] · 1s/linear, phase 0.917s |
| `line-spinner` | LineSpinner | [`registry/ui/loading/line-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/line-spinner.tsx) | rotate=360 · 1.2s/linear |
| `liquid-dots` | LiquidDots | [`registry/ui/loading/liquid-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/liquid-dots.tsx) | x=[-16,16,-16] · 2s/easeInOut
x=[16,-16,16] · 2s/easeInOut |
| `mac-terminal` | MacTerminal | [`registry/ui/loading/mac-terminal.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/mac-terminal.tsx) | opacity=[1,0,1] · 1s/linear |
| `magnetic-dots` | MagneticDots | [`registry/ui/loading/magnetic-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/magnetic-dots.tsx) | x=[0,8,0] · 1.5s/easeInOut
x=[0,-8,0] · 1.5s/easeInOut |
| `anim-matrix-loader` | MatrixGridLoader | [`src/components/css-animations/whimsical/MatrixGridLoader.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/src/components/css-animations/whimsical/MatrixGridLoader.tsx) | opacity=[0.25,0.55,0.8,1]; backgroundColor=["var(--tx-color-primary-dark-2)","var(--tx-color-primary)","var(--tx-color-primary-light-3)","var(--tx-color-primary-light-5)"] · 0.8s/easeInOut, phase 0.2s
opacity=[0.25,0.55,0.8,1]; backgroundColor=["var(--tx-color-primary-dark-2)","var(--tx-color-primary)","var(--tx-color-primary-light-3)","var(--tx-color-primary-light-5)"] · 0.8s/easeInOut, phase 0.4s
opacity=[0.25,0.55,0.8,1]; backgroundColor=["var(--tx-color-primary-dark-2)","var(--tx-color-primary)","var(--tx-color-primary-light-3)","var(--tx-color-primary-light-5)"] · 0.8s/easeInOut, phase 0.8s
opacity=[0.25,0.55,0.8,1]; backgroundColor=["var(--tx-color-primary-dark-2)","var(--tx-color-primary)","var(--tx-color-primary-light-3)","var(--tx-color-primary-light-5)"] · 0.8s/easeInOut, phase 0.6s |
| `minimal-triangle` | MinimalTriangle | [`registry/ui/loading/minimal-triangle.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/minimal-triangle.tsx) | strokeDashoffset=[120,0,-120] · 2s/easeInOut |
| `morph-dot-ring` | MorphDotRing | [`registry/ui/loading/morph-dot-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/morph-dot-ring.tsx) | rotate=180; gap=["4px","0px","4px"] · 2s/easeInOut |
| `morph-loader` | MorphLoader | [`registry/ui/loading/morph-loader.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/morph-loader.tsx) | borderRadius=["25%","50%","50%","25%","25%"]; rotate=[0,90,180,270,360]; scale=[1,0.8,1.1,0.8,1] · 2.2s/easeInOut |
| `morphing-bars` | MorphingBars | [`registry/ui/loading/morphing-bars.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/morphing-bars.tsx) | gap=["4px","0px","4px"] · 2s/easeInOut
height=[32,16,32] · 2s/easeInOut |
| `morphing-infinity` | MorphingInfinity | [`registry/ui/loading/morphing-infinity.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/morphing-infinity.tsx) | x=[0,24,0]; scale=[1,0.5,1] · 2s/easeInOut
x=[24,0,24]; scale=[0.5,1,0.5] · 2s/easeInOut |
| `morphing-ring` | MorphingRing | [`registry/ui/loading/morphing-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/morphing-ring.tsx) | rotate=180; borderRadius=["10%","50%","10%"] · 2s/easeInOut |
| `morphing-shape` | MorphingShape | [`registry/ui/loading/morphing-shape.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/morphing-shape.tsx) | borderRadius=["10%","50%","10%"]; rotate=[0,90,180]; scale=[1,0.8,1] · 2s/easeInOut |
| `newtons-cradle` | NewtonsCradle | [`registry/ui/loading/newtons-cradle.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/newtons-cradle.tsx) | rotate=[25,0,0,0,0,25] · 1.5s/easeInOut
rotate=[0,0,0,-25,0,0] · 1.5s/easeInOut |
| `offset-rings` | OffsetRings | [`registry/ui/loading/offset-rings.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/offset-rings.tsx) | rotate=[0,180,360] · 2s/easeInOut
rotate=[0,-180,-360] · 2s/easeInOut, phase 0.2s |
| `orbiting-circles` | OrbitingCircles | [`registry/ui/loading/orbiting-circles.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/orbiting-circles.tsx) | rotate=360 · 2s/linear
rotate=-360 · 2s/linear |
| `orbiting-dot` | OrbitingDot | [`registry/ui/loading/orbiting-dot.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/orbiting-dot.tsx) | rotate=360 · 2s/linear |
| `origami-shape` | OrigamiShape | [`registry/ui/loading/origami-shape.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/origami-shape.tsx) | rotateY=[0,180,0] · 2s/easeInOut |
| `pendulum` | Pendulum | [`registry/ui/loading/pendulum.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/pendulum.tsx) | rotate=[-45,45,-45] · 1.5s/easeInOut |
| `pulsating-dots` | PulsatingDots | [`registry/ui/loading/pulsating-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/pulsating-dots.tsx) | scale=[1,1.5,1]; opacity=[0.5,1,0.5] · 1.2s/easeInOut
scale=[1,1.5,1]; opacity=[0.5,1,0.5] · 1.2s/easeInOut, phase 0.2s
scale=[1,1.5,1]; opacity=[0.5,1,0.5] · 1.2s/easeInOut, phase 0.4s |
| `pulse` | Pulse | [`registry/ui/loading/pulse.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/pulse.tsx) | scale=2.8; opacity=0 · 1.8s/easeOut
scale=2.8; opacity=0 · 1.8s/easeOut, phase 0.6s |
| `pulse-dot` | PulseDot | [`registry/ui/loading/pulse-dot.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/pulse-dot.tsx) | scale=[0,1]; opacity=[0.8,0] · 1.5s/easeOut |
| `pulse-dots` | PulseDots | [`registry/ui/loading/pulse-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/pulse-dots.tsx) | opacity=[0.2,1,0.2] · 1.4s
opacity=[0.2,1,0.2] · 1.4s, phase 0.2s
opacity=[0.2,1,0.2] · 1.4s, phase 0.4s |
| `anim-pulse-dots` | PulseOrbitDots | [`src/components/css-animations/whimsical/AppleLoaders.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/src/components/css-animations/whimsical/AppleLoaders.tsx) | scale=[0.6,1.15,0.6]; opacity=[0.3,1,0.3] · 1.2s/easeInOut
scale=[0.6,1.15,0.6]; opacity=[0.3,1,0.3] · 1.2s/easeInOut, phase 0.2s
scale=[0.6,1.15,0.6]; opacity=[0.3,1,0.3] · 1.2s/easeInOut, phase 0.4s |
| `pulse-square` | PulseSquare | [`registry/ui/loading/pulse-square.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/pulse-square.tsx) | scale=[1,1.2,1]; opacity=[1,0.3,1]; borderRadius=["20%","50%","20%"] · 1.5s/easeInOut |
| `pumping-heart` | PumpingHeart | [`registry/ui/loading/pumping-heart.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/pumping-heart.tsx) | scale=[1,1.25,1,1.25,1] · 1.5s/easeInOut |
| `radar-sweep` | RadarSweep | [`registry/ui/loading/radar-sweep.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/radar-sweep.tsx) | rotate=360 · 1.8s/linear |
| `ring-sweep` | RingSweep | [`registry/ui/loading/ring-sweep.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/ring-sweep.tsx) | rotate=360 · 1s/linear |
| `ripple-effect` | RippleEffect | [`registry/ui/loading/ripple-effect.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/ripple-effect.tsx) | scale=1.6; opacity=0 · 2.2s/easeOut
scale=1.6; opacity=0 · 2.2s/easeOut, phase 0.7s
scale=1.6; opacity=0 · 2.2s/easeOut, phase 1.4s |
| `rotating-cross` | RotatingCross | [`registry/ui/loading/rotating-cross.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/rotating-cross.tsx) | rotate=180 · 0.8s/easeInOut |
| `rotating-triangle` | RotatingTriangle | [`registry/ui/loading/rotating-triangle.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/rotating-triangle.tsx) | rotate=360 · 2s/linear |
| `shape-shift-grid` | ShapeShiftGrid | [`registry/ui/loading/shape-shift-grid.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/shape-shift-grid.tsx) | borderRadius=["10%","50%","10%"]; scale=[1,0.8,1] · 1.5s/easeInOut
borderRadius=["10%","50%","10%"]; scale=[1,0.8,1] · 1.5s/easeInOut, phase 0.1s
borderRadius=["10%","50%","10%"]; scale=[1,0.8,1] · 1.5s/easeInOut, phase 0.2s
borderRadius=["10%","50%","10%"]; scale=[1,0.8,1] · 1.5s/easeInOut, phase 0.3s |
| `shimmer-line` | ShimmerLine | [`registry/ui/loading/shimmer-line.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/shimmer-line.tsx) | x=["-100%","300%"] · 1.5s/easeInOut |
| `siri-wave` | SiriWave | [`registry/ui/loading/siri-wave.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/siri-wave.tsx) | height=[4,24,4] · 1.2s/easeInOut
height=[4,24,4] · 1.2s/easeInOut, phase 0.1s
height=[4,24,4] · 1.2s/easeInOut, phase 0.2s
height=[4,24,4] · 1.2s/easeInOut, phase 0.3s
height=[4,24,4] · 1.2s/easeInOut, phase 0.4s |
| `skeleton` | Skeleton | [`registry/ui/loading/skeleton.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/skeleton.tsx) | x="150%" · 1.6s/easeInOut |
| `skeleton-loader` | SkeletonLoader | [`registry/ui/loading/skeleton-loader.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/skeleton-loader.tsx) | opacity=[0.5,1,0.5] · 1.5s/easeInOut
opacity=[0.5,1,0.5] · 1.5s/easeInOut, phase 0.2s
opacity=[0.5,1,0.5] · 1.5s/easeInOut, phase 0.4s
opacity=[0.5,1,0.5] · 1.5s/easeInOut, phase 0.6s |
| `sliding-bars` | SlidingBars | [`registry/ui/loading/sliding-bars.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/sliding-bars.tsx) | y=[0,24,0] · 1.5s/easeInOut
y=[0,-24,0] · 1.5s/easeInOut |
| `smooth-dot-shift` | SmoothDotShift | [`registry/ui/loading/smooth-dot-shift.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/smooth-dot-shift.tsx) | x=[0,18,36,18,0] · 2s/easeInOut |
| `smooth-ring` | SmoothRing | [`registry/ui/loading/smooth-ring.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/smooth-ring.tsx) | rotate=0→360 · 1s/linear |
| `smooth-rounded-square` | SmoothRoundedSquare | [`registry/ui/loading/smooth-rounded-square.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/smooth-rounded-square.tsx) | borderRadius=["10%","50%","10%"] · 2s/easeInOut |
| `spinning-squares` | SpinningSquares | [`registry/ui/loading/spinning-squares.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/spinning-squares.tsx) | x=[0,24,24,0,0]; y=[0,0,24,24,0] · 2s/easeInOut
x=[0,-24,-24,0,0]; y=[0,0,-24,-24,0] · 2s/easeInOut |
| `spiral-spinner` | SpiralSpinner | [`registry/ui/loading/spiral-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/spiral-spinner.tsx) | rotate=360; scale=[1,0.8,1] · 1.5s/easeInOut |
| `spring-bars` | SpringBars | [`registry/ui/loading/spring-bars.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/spring-bars.tsx) | scaleX=[0.2,1,0.2] · 1.4s/easeInOut
scaleX=[0.2,1,0.2] · 1.4s/easeInOut, phase 0.15s
scaleX=[0.2,1,0.2] · 1.4s/easeInOut, phase 0.3s |
| `spring-dot-matrix` | SpringDotMatrix | [`registry/ui/loading/spring-dot-matrix.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/spring-dot-matrix.tsx) | scale=[1,0.4,1] · 1.5s/easeInOut
scale=[1,0.4,1] · 1.5s/easeInOut, phase 0.15s
scale=[1,0.4,1] · 1.5s/easeInOut, phase 0.3s
scale=[1,0.4,1] · 1.5s/easeInOut, phase 0.45s
scale=[1,0.4,1] · 1.5s/easeInOut, phase 0.6s |
| `spring-hexagon` | SpringHexagon | [`registry/ui/loading/spring-hexagon.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/spring-hexagon.tsx) | scale=[1,1.15,1]; rotate=[0,60,60] · 2s/spring, bounce=0.3 |
| `spring-ring-expand` | SpringRingExpand | [`registry/ui/loading/spring-ring-expand.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/spring-ring-expand.tsx) | scale=1.25; opacity=0 · 1.6s/easeOut
scale=1.25; opacity=0 · 1.6s/easeOut, phase 0.8s |
| `spring-text-pop` | SpringTextPop | [`registry/ui/loading/spring-text-pop.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/spring-text-pop.tsx) | y=[0,-6,0] · 1.2s/easeInOut
y=[0,-6,0] · 1.2s/easeInOut, phase 0.08s
y=[0,-6,0] · 1.2s/easeInOut, phase 0.16s
y=[0,-6,0] · 1.2s/easeInOut, phase 0.24s
y=[0,-6,0] · 1.2s/easeInOut, phase 0.32s
y=[0,-6,0] · 1.2s/easeInOut, phase 0.4s
y=[0,-6,0] · 1.2s/easeInOut, phase 0.48s
y=[0,-6,0] · 1.2s/easeInOut, phase 0.56s
y=[0,-6,0] · 1.2s/easeInOut, phase 0.64s
y=[0,-6,0] · 1.2s/easeInOut, phase 0.72s |
| `square-accordion` | SquareAccordion | [`registry/ui/loading/square-accordion.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/square-accordion.tsx) | height=[12,32,12] · 1.5s/easeInOut
height=[12,32,12] · 1.5s/easeInOut, phase 0.2s
height=[12,32,12] · 1.5s/easeInOut, phase 0.4s |
| `square-grid` | SquareGrid | [`registry/ui/loading/square-grid.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/square-grid.tsx) | scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.2s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.4s
scale=[1,0.5,1]; opacity=[1,0.3,1] · 1.5s/easeInOut, phase 0.6s |
| `square-snake` | SquareSnake | [`registry/ui/loading/square-snake.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/square-snake.tsx) | opacity=[0.1,1,0.1] · 1.5s/easeInOut
opacity=[0.1,1,0.1] · 1.5s/easeInOut, phase 0.15s
opacity=[0.1,1,0.1] · 1.5s/easeInOut, phase 0.3s
opacity=[0.1,1,0.1] · 1.5s/easeInOut, phase 0.45s
opacity=[0.1,1,0.1] · 1.5s/easeInOut, phase 0.6s |
| `square-spinner` | SquareSpinner | [`registry/ui/loading/square-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/square-spinner.tsx) | rotate=90 · 0.6s/easeInOut |
| `stacked-bar-pulse` | StackedBarPulse | [`registry/ui/loading/stacked-bar-pulse.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/stacked-bar-pulse.tsx) | opacity=[0.2,1,0.2]; width=["50%","100%","50%"] · 1.5s/easeInOut
opacity=[0.2,1,0.2]; width=["50%","100%","50%"] · 1.5s/easeInOut, phase 0.2s
opacity=[0.2,1,0.2]; width=["50%","100%","50%"] · 1.5s/easeInOut, phase 0.4s |
| `swapping-dots` | SwappingDots | [`registry/ui/loading/swapping-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/swapping-dots.tsx) | x=[0,32,0] · 1.5s/easeInOut
x=[0,-32,0] · 1.5s/easeInOut |
| `swirling-spinner` | SwirlingSpinner | [`registry/ui/loading/swirling-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/swirling-spinner.tsx) | rotate=360 · 1.3s/linear
rotate=-360 · 0.9s/linear |
| `symmetric-wave` | SymmetricWave | [`registry/ui/loading/symmetric-wave.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/symmetric-wave.tsx) | height=[8,24,8] · 1.2s/easeInOut
height=[8,24,8] · 1.2s/easeInOut, phase 0.1s
height=[8,24,8] · 1.2s/easeInOut, phase 0.2s
height=[8,24,8] · 1.2s/easeInOut, phase 0.3s
height=[8,24,8] · 1.2s/easeInOut, phase 0.4s |
| `terminal-loader` | TerminalLoader | [`registry/ui/loading/terminal-loader.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/terminal-loader.tsx) | opacity=[1,0,1] · 0.8s/linear |
| `text-blink` | TextBlink | [`registry/ui/loading/text-blink.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/text-blink.tsx) | opacity=[1,0.2,1] · 1.5s/easeInOut |
| `text-dots` | TextDots | [`registry/ui/loading/text-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/text-dots.tsx) | opacity=[0,1,1,0] · 2s
opacity=[0,0,1,0] · 2s |
| `text-morph` | TextMorph | [`registry/ui/loading/text-morph.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/text-morph.tsx) | opacity=[1,0,0,1]; y=[0,-16,16,0] · 3s/easeInOut
opacity=[0,1,1,0]; y=[16,0,0,-16] · 3s/easeInOut |
| `text-shimmer` | TextShimmer | [`registry/ui/loading/text-shimmer.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/text-shimmer.tsx) | WebkitMaskPosition=["100% 0%","-100% 0%"] · 1.5s/linear |
| `text-shimmer-wave` | TextShimmerWave | [`registry/ui/loading/text-shimmer-wave.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/text-shimmer-wave.tsx) | opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut
opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut, phase 0.1s
opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut, phase 0.2s
opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut, phase 0.3s
opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut, phase 0.4s
opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut, phase 0.5s
opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut, phase 0.6s
opacity=[0.3,1,0.3]; y=[0,-2,0] · 1.5s/easeInOut, phase 0.7s |
| `trailing-dots` | TrailingDots | [`registry/ui/loading/trailing-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/trailing-dots.tsx) | rotate=360 · 1.5s/easeInOut
rotate=360 · 1.5s/easeInOut, phase 0.1s
rotate=360 · 1.5s/easeInOut, phase 0.2s
rotate=360 · 1.5s/easeInOut, phase 0.3s
rotate=360 · 1.5s/easeInOut, phase 0.4s |
| `triple-dot-spinner` | TripleDotSpinner | [`registry/ui/loading/triple-dot-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/triple-dot-spinner.tsx) | rotate=360 · 2s/linear |
| `twin-orbit` | TwinOrbit | [`registry/ui/loading/twin-orbit.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/twin-orbit.tsx) | rotate=360 · 1.5s/linear
rotate=-360 · 1.5s/linear |
| `typing` | Typing | [`registry/ui/loading/typing.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/typing.tsx) | opacity=[1,0,1] · 0.8s/linear |
| `typing-indicator` | TypingIndicator | [`registry/ui/loading/typing-indicator.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/typing-indicator.tsx) | y=[0,-4,0] · 0.6s/easeInOut
y=[0,-4,0] · 0.6s/easeInOut, phase 0.15s
y=[0,-4,0] · 0.6s/easeInOut, phase 0.3s |
| `wandering-cube` | WanderingCube | [`registry/ui/loading/wandering-cube.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/wandering-cube.tsx) | x=[0,24,24,0,0]; y=[0,0,24,24,0]; rotate=[0,-90,-180,-270,-360] · 2.5s/easeInOut |
| `watch-spinner` | WatchSpinner | [`registry/ui/loading/watch-spinner.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/watch-spinner.tsx) | rotate=360 · 1s/easeInOut
rotate=360 · 1.5s/easeInOut
rotate=360 · 2s/easeInOut |
| `wave-dots` | WaveDots | [`registry/ui/loading/wave-dots.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/wave-dots.tsx) | y=[4,-4,4] · 1s/easeInOut
y=[4,-4,4] · 1s/easeInOut, phase 0.15s
y=[4,-4,4] · 1s/easeInOut, phase 0.3s
y=[4,-4,4] · 1s/easeInOut, phase 0.45s
y=[4,-4,4] · 1s/easeInOut, phase 0.6s |
| `wave-physics-loader` | WavePhysicsLoader | [`registry/ui/loading/wave-physics-loader.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/wave-physics-loader.tsx) | 15 bars + ball; 201 phases; 4 bounces; 4s |
| `waveform-loader` | WaveformLoader | [`registry/ui/loading/waveform-loader.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/waveform-loader.tsx) | height=[4,24,4] · 1s/easeInOut
height=[4,24,4] · 1s/easeInOut, phase 0.421s
height=[4,24,4] · 1s/easeInOut, phase 0.455s
height=[4,24,4] · 1s/easeInOut, phase 0.071s
height=[4,24,4] · 1s/easeInOut, phase -0.378s
height=[4,24,4] · 1s/easeInOut, phase -0.479s
height=[4,24,4] · 1s/easeInOut, phase -0.14s
height=[4,24,4] · 1s/easeInOut, phase 0.328s |
| `zig-zag-pulse` | ZigZagPulse | [`registry/ui/loading/zig-zag-pulse.tsx`](https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/43c29ce9cdd16459e3eab4992381b8d35b38776a/registry/ui/loading/zig-zag-pulse.tsx) | opacity=[0.2,1,0.2] · 1.2s/easeInOut
opacity=[0.2,1,0.2] · 1.2s/easeInOut, phase 0.1s
opacity=[0.2,1,0.2] · 1.2s/easeInOut, phase 0.2s
opacity=[0.2,1,0.2] · 1.2s/easeInOut, phase 0.3s
opacity=[0.2,1,0.2] · 1.2s/easeInOut, phase 0.4s
opacity=[0.2,1,0.2] · 1.2s/easeInOut, phase 0.5s |
## 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.