Getting StartedOwnable model, workflow, and first local install 2
LayoutInstallable layout wrappers with local source ownership 6
OverlayInstallable overlay wrappers with local source ownership 3
FeedbackInstallable feedback wrappers with local source ownership 5
FormInstallable form components 11
UtilityInstallable utility wrappers with local source ownership 6
NavigationInstallable navigation components 6
ToolingCLI and registry contracts 2
ReleasePublishing and workflow structure for the ownable surface 1

Progress Spinner

The ownable Progress Spinner install gives your app a local circular loading wrapper with editable size, stroke, and motion defaults that can evolve with the product surfaces that use it.

Why own Progress Spinner locally

Spinners often become product-specific once teams tune density, animation style, stroke tone, and usage around panels, buttons, and metrics surfaces. Local ownership keeps those decisions versioned with the screens that depend on them.

  • Adjust size and stroke weight for compact controls, dashboards, or full-page loading surfaces.
  • Align circular motion, track contrast, and progress tone with your brand and accessibility goals.
  • Promote the generated wrapper into richer status components without forking library code.

What the install includes

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

Ownable Install

Install Progress Spinner 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

bash
pnpm dlx tailng add progress-spinner

Generated files

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

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

Import in your feature module/component

Imports

ts
import { TngProgressSpinner, TngProgressSpinnerPrimitive } from './tailng-ui/progress-spinner';

Usage

Template usage

html
<tng-progress-spinner [value]="72" ariaLabel="Sync progress"></tng-progress-spinner>
<tng-progress-spinner [value]="92" [size]="48" ariaLabel="Quality checks"></tng-progress-spinner>
<tng-progress-spinner [indeterminate]="true" [strokeWidth]="5" ariaLabel="Preparing release"></tng-progress-spinner>