Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

About

The Progress component provides a visual representation of a task's status. It can be used for determinate tasks (where the completion percentage is known) or indeterminate tasks (where the duration is unknown).

Installation

Run the following command to install the progress component:

Usage

progress-usage.ts

Default (Determinate)

A standard progress bar that updates its value over time.

System Setup15%

Initializing core modules and verifying local configuration...

Indeterminate

Used for processes where the exact progress cannot be determined.

Syncing Data

Connecting to the global cluster. This might take a few moments...

Semantic Colors

Apply semantic colors to reflect the state of the task (Success, Warning, Error).

Deployment StatusSuccess
Storage Capacity85%
CPU Usage98%
Database Migration42%

With Labels

Integrate labels and percentage indicators for better user guidance.

Project Velocity

Design PhaseComplete
Development72%
QA & TestingIn Progress...

API Reference

Helm API

Progress is composed of a container and an indicator directive.

Directive / ComponentSelectorDescription
HlmProgresshlm-progress The root container for the progress bar.
HlmProgressIndicatorhlm-progress-indicator The moving part that represents the progress.