Preview
Use Case
Inspired by Braun audio equipment, this LED meter provides instant visual feedback for system metrics. Features subtle jitter animation for authenticity and heat variant for critical thresholds.
Industry Applications
Stock Level Visualization (logistics)
Display stock levels with the signature LED-style segments inspired by Braun audio equipment. Instantly see capacity at a glance.
- • 10-segment LED display for 10% granularity
- • Heat variant for critical thresholds
- • Subtle jitter animation adds authenticity
- • Compact mode for inline table display
Server Health Indicators (devops)
Monitor server capacity and resource utilization. The Meter provides instant visual feedback without requiring users to read numbers.
- • Normal (green) and heat (red) variants
- • Works at any scale from full panel to table cell
- • Accessible with screen reader support
- • Zero-dependency, pure CSS animation
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Percentage value (0-100) |
label | string | '' | Label displayed above the meter |
variant | 'normal' | 'heat' | 'normal' | Color variant (green or red) |
compact | boolean | false | Compact mode without label and padding |
class | string | — | Additional CSS classes |
Related Components
See it in Action
Explore the Meter in an interactive dashboard environment.
Customize in ShowroomMore Data Display Components
DataTable
Designed for high-density data visualization in Logistics control panels, this Svelte 5 DataTable supports row selection, stock level meters, and status tags.
Ticker
Optimized for Fintech applications, this ticker handles 60+ updates per second using Svelte 5 Runes for fine-grained reactivity.
Tag
Purpose-built for inventory and logistics systems, these status tags use carefully calibrated colors that meet WCAG AA contrast requirements while maintaining the industrial aesthetic.