## Progressbar

A progress bar component that visually indicates the completion status of a task or process, providing users with a clear and simple way to track ongoing activities.
Demo
Required Imports
import { ProgressBarModule } from 'nextsapien-component-lib';
Properties

Type | Name | Description | Data type | Required | Default | Demo
--- | --- | --- | --- | --- | --- | ---
Input | stepWeight | Weight of each step in percentage. | Number | true | 25
Input | routes | Routes that appear on progressbar. | IRouteParams[] | true | n/a | n/a
Input | routes with sub routes | The Routes JSON objects can include sub-routes as a list of IRouteParams[]. | `{{ 'IRouteParams[] = [{ subRoutes:IRouteParams[] }]' }}` | true | n/a | n/a
Input | includeSteps | A boolean value whether to show steps or not. | boolean | false | false |
Input | includeStepsCount | A boolean value whether to show step count or not. | boolean | false | false |
Input | progress | Progress made in percentage. | percentage | number | 0 |
Input | farthestProgress | Farthest progress made by user in percentage. | number | false | 0 |
Input | availableFarthestProgress | Available farthest progress made by user in percentage. | number | false | 0 |
Input | router | Functions which executes to navigate user on clicking certain step of progressbar. | | routeToNextPage: Function; routeBackinRegistrationFlow: Function } | true | n/a | n/a
Input | progBarCurrentStep | The current step that the progress bar has reached.
Input | progBarTotalSteps | The total number of steps in the progress bar.

CSS Properties

Name | Description | Default Value
--- | --- | ---
--preview-window-color-active | Used to show visited routes | #fe3c72

Example usage
`{{ progressbarCode }}`