@banegasn/m3-progress
v1.0.3
Published
Material Design 3 progress indicator web component
Maintainers
banegasnReadme
@banegasn/m3-progress
Material Design 3 Progress Indicator web component — framework-agnostic, built with Lit.
A lightweight M3 Linear Progress Indicator web component following the Material Design 3 progress indicator specifications. Supports determinate and indeterminate states. Works in Angular, React, Vue, Svelte, or plain HTML — no build step required.
Features
- Determinate and indeterminate modes
- Smooth animation following M3 motion specs
- Accessible with ARIA
progressbarrole - Customizable via CSS custom properties
- Framework-agnostic custom element
Installation
npm install @banegasn/m3-progress
# or
pnpm add @banegasn/m3-progress
# or
yarn add @banegasn/m3-progressCDN Usage (no build step)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>M3 Progress Demo</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@banegasn/m3-progress/+esm"></script>
<style>
body { font-family: Roboto, sans-serif; padding: 32px; background: #fef7ff; min-width: 400px}
.demo { display: flex; flex-direction: column; gap: 24px; max-width: 400px; }
label { font-size: 14px; color: #49454f; margin-bottom: 4px; display: block; }
</style>
</head>
<body>
<div class="demo">
<div>
<label>Indeterminate</label>
<m3-progress></m3-progress>
</div>
<div>
<label>Determinate — 60%</label>
<m3-progress value="0.6"></m3-progress>
</div>
<div>
<label>Determinate — 100%</label>
<m3-progress value="1"></m3-progress>
</div>
</div>
</body>
</html>npm Usage
import '@banegasn/m3-progress';<!-- Indeterminate -->
<m3-progress></m3-progress>
<!-- Determinate (value between 0 and 1) -->
<m3-progress value="0.75"></m3-progress>API
Properties
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| value | number \| null | null | Progress value between 0 and 1. null = indeterminate. |
| buffer | number | 1 | Buffer value between 0 and 1 (for buffered progress) |
CSS Custom Properties
| Property | Default | Description |
|----------|---------|-------------|
| --md-sys-color-primary | #6750a4 | Active track color |
| --md-sys-color-surface-container-highest | #e6e0e9 | Track background color |
| --md-progress-track-height | 4px | Height of the progress bar |
Framework Usage
Angular
import '@banegasn/m3-progress';<m3-progress [value]="uploadProgress"></m3-progress>React
import '@banegasn/m3-progress';
// <m3-progress value={uploadProgress} />Vue
<m3-progress :value="uploadProgress" />Resources
License
MIT