Getting StartedInstallation and setup guides 6
FormInput and selection components 26
LayoutWorkflow and structural layout components 10
NavigationMenu surfaces and hierarchical actions 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 6
UtilityGeneral-purpose interface utilities 7
Overview API Styling Examples

Progress Bar overview

Progress Bar gives you determinate and indeterminate linear loading states with the default wrapper shell, percent calculation, and semantic progressbar attributes.

Imports

Use the wrapper when you want the built-in linear shell, fill motion, and width calculation.

Component import

ts
import { TngProgressBarComponent } from '@tailng-ui/components';

Style variants

Use the wrapper inside a plain CSS shell or a utility-authored Tailwind surface.

Wrapper progress bar (plain CSS)

Accessibility baseline

  • Set a meaningful label with ariaLabel when the context is not obvious.
  • Use determinate mode when a numeric completion value is available.
  • Use indeterminate mode for unknown duration loading states.