# @banegasn/m3-loading-indicator ![Preview](images/preview.png) > Material Design 3 Loading Indicator web component — framework-agnostic, built with Lit. [![npm version](https://img.shields.io/npm/v/@banegasn/m3-loading-indicator.svg)](https://www.npmjs.com/package/@banegasn/m3-loading-indicator) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](../../LICENSE) An expressive **M3 Loading Indicator** web component following the [Material Design 3 progress indicator specifications](https://m3.material.io/components/progress-indicators/overview). Features unique shape morphing animations — the indicator transitions between circle and square shapes while loading. Works in Angular, React, Vue, Svelte, or plain HTML — no build step required. ## Features - Standard and contained variants - Circle and square shape morphing animation - Accessible with ARIA `status` role - Customizable via CSS custom properties - Framework-agnostic custom element ## Installation ```bash npm install @banegasn/m3-loading-indicator # or pnpm add @banegasn/m3-loading-indicator # or yarn add @banegasn/m3-loading-indicator ``` ## CDN Usage (no build step) ```html M3 Loading Indicator Demo
``` ## npm Usage ```js import '@banegasn/m3-loading-indicator'; ``` ```html ``` ## API ### Properties | Property | Type | Default | Description | |----------|------|---------|-------------| | `variant` | `'standard' \| 'contained'` | `'standard'` | Indicator variant | | `shape` | `'circle' \| 'square'` | `'circle'` | Morphing shape style | ### CSS Custom Properties | Property | Default | Description | |----------|---------|-------------| | `--md-sys-color-primary` | `#6750a4` | Indicator color | | `--md-sys-color-surface-container-high` | `#ece6f0` | Contained variant background | | `--md-loading-indicator-size` | `48px` | Size of the indicator | ## Framework Usage ### Angular ```typescript import '@banegasn/m3-loading-indicator'; ``` ```html ``` ### React ```jsx import '@banegasn/m3-loading-indicator'; // {isLoading && } ``` ### Vue ```vue ``` ## Resources - [Material Design 3 Progress Indicators](https://m3.material.io/components/progress-indicators/overview) - [GitHub Repository](https://github.com/banegasn/components) ## License MIT