DEV Community

Cover image for m3-loading-indicator: Material Design 3 Morphing Loader
jQueryScript
jQueryScript

Posted on

m3-loading-indicator: Material Design 3 Morphing Loader

m3-loading-indicator: a JavaScript library that renders the Material Design 3 expressive loading indicator in React, Svelte 5, Vue 3, and vanilla JS.

It ports the animation system directly from Android's material-components-android, so you get the same spring physics, shape morphing sequence, and rotation math on the web.

Key features:

  • 7 morphing shapes with spring-driven transitions
  • Canvas rendering with HiDPI support
  • Props for size, color, speed, and pause state
  • Contained variant with a circular background
  • Tree-shakeable entry points per framework
  • TypeScript-first

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)