Progress Bar

The ownable Progress Bar install gives your app a local linear loading wrapper with editable track height, indicator treatment, and motion defaults that can evolve with your product UI.

Why own Progress Bar locally

Progress bars often pick up product-specific color ramps, density changes, threshold labels, and alternate loading motion. Local ownership keeps those decisions versioned with the flows that depend on them instead of waiting on a package release.

Match bar height, radius, and motion to each product surface without forking library code.
Layer in labels, status copy, and validation thresholds where the feature actually needs them.
Keep indicator tone, track contrast, and indeterminate motion aligned with your brand system.

What the install includes

The registry-backed progress-bar install writes the primitive helper file, wrapper component, indicator template, stylesheet, and export barrel. After install, the loading surface belongs to your app and can be edited like any other local source.

Ownable Install

Install Progress Bar from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm dlx tailng add progress-bar

npx tailng add progress-bar

Generated files

The command scaffolds local files under src/app/tailng-ui/progress-bar.

src/app/tailng-ui/progress-bar/tng-progress-bar-primitive.ts
src/app/tailng-ui/progress-bar/tng-progress-bar.ts
src/app/tailng-ui/progress-bar/tng-progress-bar.html
src/app/tailng-ui/progress-bar/tng-progress-bar.css
src/app/tailng-ui/progress-bar/index.ts

Import in your feature module/component

import { TngProgressBar, TngProgressBarPrimitive, TngProgressBarIndicatorPrimitive } from './tailng-ui/progress-bar';

Usage

<tng-progress-bar [value]="72" ariaLabel="Upload progress"></tng-progress-bar>
<tng-progress-bar [value]="92" ariaLabel="Quality checks"></tng-progress-bar>
<tng-progress-bar [indeterminate]="true" ariaLabel="Preparing release"></tng-progress-bar>