FLIN App

Basic Progress

Sequential progress bars showing completion stages.

Color Variants

Five semantic colors for different metric types.

Without Label

Minimal bars without text labels for compact displays.

System Metrics

Real-world metrics like storage, bandwidth, and quotas.

Usage

<Progress value="25" label="Getting started" /><Progress value="80" label="Storage" type="gold" /><Progress value="65" label="Tests Passed" type="success" /><Progress value="60" type="gold" /> // no label

Props

Prop	Type	Default	Description
`value`	text	"0"	Progress percentage (0-100)
`label`	text	""	Label shown above the bar
`type`	text	"gold"	Color: gold, success, info, error, warning

Progress

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Basic Progress

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Color Variants

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Without Label

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } System Metrics