Appllama Loader Buttons
25 named loading-button motion studies: 13 WebGL, 12 in SVG, Canvas and CSS
Tier B · UsefulGalleryAnimation LibraryReferenceloader-buttons.appllama.io
A single-page motion experiment by Jaimin (@jaimintf) for Appllama, showing 25 distinct loading-button animations, each with its own name, technique note and status label such as Gathering, Tracing or Flipping. Thirteen are WebGL shaders; the other twelve are SVG, Canvas or DOM/CSS. Every study is an independent ES module under /src/designs/, so the source is readable even though the page itself renders nothing without JavaScript. There is no package, no licence and no copy button - it is reference and inspiration, not a library.
For an agent
Do not fetch the HTML expecting content - it is a JS-only shell and the animation names live in JavaScript. Fetch https://loader-buttons.appllama.io/src/designs/index.js for the 25 module names, then a single module such as /src/designs/13-strange-attractor-scribe.js for its self-contained mount/render/resize/destroy source; each exports name, kind, technique and label. Mine it for one specific loader when a submit button needs a signature moment, and keep the WebGL ones out of long lists - the page itself lazily mounts and releases WebGL contexts because 13 live contexts will exhaust the browser. No licence is stated anywhere, so treat the code as reference and reimplement rather than copy into shipped work.
Why it is here. Loading states are where most interfaces go generic; this is a rare set of 25 individually authored, individually named alternatives to the spinner, with the technique spelled out for each.
Facts
- License
- No license file
- Pricing
- Free
- Framework
- Vanilla JS
- Styling
- Vanilla CSS, Shader / GLSL
- Distribution
- Browse-only gallery or archive
- Platform
- Web
- Content type
- Code
- Agent readiness
- Client-rendered shell, Readable open source
- Accessibility
- Honors reduced motion, Semantic HTML
- Maturity
- Experimental
Components it ships
25 totalHelps you build
2Templates
25- Fibonacci Breather · Loading-button motion study (webgl): Analytic WebGL2 Fibonacci micro-beads
- Glass Tide Lens · Loading-button motion study (webgl)
- Binary Metaball Mitosis · Loading-button motion study (webgl)
- Curl-Field Comet · Loading-button motion study (webgl)
- Living Reaction Seed · Loading-button motion study (webgl)
- Chladni Whisper · Loading-button motion study (webgl)
- Topology Courier · Loading-button motion study (webgl)
- Meridian Loom · Loading-button motion study (webgl)
- Voronoi Lantern · Loading-button motion study (webgl)
- Event Horizon Pulse · Loading-button motion study (webgl)
- Prismatic Caustic Coin · Loading-button motion study (webgl)
- Voxel Assembly Line · Loading-button motion study (webgl)
- Strange-Attractor Scribe · Loading-button motion study (webgl): Precomputed Lorenz phase-space stroke
- Conic Eclipse · Loading-button motion study (css/svg)
- Orbital Calligraphy · Loading-button motion study (css/svg)
- Mercury Relay · Loading-button motion study (css/svg)
- Noise Chrysalis · Loading-button motion study (css/svg)
- Contour Choir · Loading-button motion study (css/svg)
- Shapeshifter Seal · Loading-button motion study (css/svg)
- Murmuration Turn · Loading-button motion study (css/svg)
- Frostwork Growth · Loading-button motion study (css/svg)
- Sandpile Bloom · Loading-button motion study (css/svg)
- Elastic Cartography · Loading-button motion study (css/svg)
- Mechanical Iris · Loading-button motion study (css/svg)
- Braille Flipwave · Loading-button motion study (dom): Authored 3D dot-matrix flip choreography
Notable for
- 25 individually authored motion studies
- 13 WebGL shaders, 12 SVG/Canvas/CSS
- each ships name, technique and status label
- honours prefers-reduced-motion and lazily releases WebGL contexts
- no licence stated
Provenance
Verified 2026-08-15. HTTP 200. https://loader-buttons.appllama.io/ (raw HTML), /src/main.js, /src/designs/index.js, /src/designs/01-fibonacci-breather.js, /src/designs/13-strange-attractor-scribe.js, /src/designs/25-braille-flipwave.js
Also in Motion & Interaction
6- GSAP · JavaScript animation engine with 19 plugins, now free for commercial use
- Lenis · Smooth-scroll engine that keeps native scroll and honours reduced-motion
- Motion · Hybrid JS/React/Vue animation engine with springs, layout and scroll animation
- NumberFlow · Dependency-free animated number component for React, Vue, Svelte and JS
- React Bits · 234 copy-paste animated React components: text effects, cursors, WebGL backgrounds
- React Native Reanimated · UI-thread animation library for React Native, v4 on the New Architecture