Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 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.