Progress Bar

Progress Bar displays linear progress for an operation or process. Use it for uploads, downloads, imports, setup completion, sync, processing, form completion, buffering, and other horizontal progress states.

Use determinate when the percentage is known, indeterminate when work is happening but the percentage is unknown, buffer when there is both primary and buffered progress, and query while waiting before known progress starts.

Do not use Progress Bar for router navigation, blocking an entire area, skeleton loading, circular KPI metrics, mini charts, or status labels. Use PageLoadingBar, BlockLoader, Skeleton, Gauge, MicroChart, or Badge instead.

Key Features:

✅ Multiple Modes: Choose from determinate, indeterminate, buffer, or query modes.
✅ Customizable: Easily adjust color and values to fit your requirements.
✅ Animated: Smooth transitions and animations for better user experience.
✅ Accessible: Built with accessibility in mind, following ARIA standards.

The NgStarter Angular Progress Bar component lets you show linear progress for an operation or process. Use ngs-progress-bar for uploads, downloads, imports, setup completion, sync, processing, form completion, buffering, and other horizontal progress states. It includes examples for Basic Progress Bar, Intermediate Progress Bar, Buffer Progress Bar, and Query Progress Bar.

Basic Progress Bar

Use determinate progress when the current percentage is known.

Intermediate Progress Bar

Use indeterminate progress when work is in progress but the percentage is unknown.

Buffer Progress Bar

Use buffer progress when primary progress and buffered/loaded progress should both be visible.

Value: 40

Buffer: 60

Query Progress Bar

Use query progress when waiting for an operation to start or resolve before normal progress is known.