<tyro-ui-progress-bar>
Progress Bar
Stylish progress bar - 3 variants:
simple, lite, gradient. Custom hex color on simple & lite. Animated fill & shimmer. Simple
Default blue + label + showLabel
Upload progress72%
Custom hex colors
Storage60%
CPU78%
Battery33%
Lite
Glowing fill effect
Data sync65%
Processing50%
Completion88%
Gradient
Animated brand gradient
Loading80%
45%
Complete!100%
Custom height
[height] input - thin / normal / large
Thin (4px)60%
Normal (8px)60%
Large (14px)60%
Inputs
Property | Type | Default | Description |
|---|---|---|---|
[variant] | 'simple' | 'lite' | 'gradient' | 'simple' | Visual style of the bar |
[value] | number (0–100) | 0 | Progress percentage |
[color] | string (hex) | '#0533c8' | Fill color (simple + lite) |
[label] | string | - | Text displayed above |
[showLabel] | boolean | false | Shows percentage top-right |
[height] | string (CSS) | '8px' | Height of the bar |