T
TailNG

Playground

Home tailng.com

tng-progress-bar demo

Features: determinate/indeterminate, value/max, disableAnimation, and klass hooks (rootKlass/trackKlass/barKlass/heightKlass).

Interactive controls

value
max
heightKlass
trackKlass
barKlass
rootKlass
Current: { mode: "determinate", value: 40, max: 100, disableAnimation: false, rootKlass: "w-full", trackKlass: "bg-border", barKlass: "bg-primary", heightKlass: "h-1" }

Live preview

Determinate uses value/max. Indeterminate ignores value and animates.

Static examples

Primary, thin
Success, medium thickness
Danger, thick
Neutral/subtle
Indeterminate (loading)
Indeterminate without animation
Custom max (value=30, max=60 -> 50%)
Constrained width via rootKlass