hc-progress-bar

Installation

npm i @haftcinco/hc-progress-bar

Module

import progress-bar from "@haftcinco/hc-progress-bar"

props

1. progress Value 2. Backgrounds 3. active or deactivate

progress Value

It specifies filling percentage of the bar | || |----------------|-------------------------------| |type|Number|
|default|0|
|required|true|

Backgrounds

this bar consists the following:

• warning
• danger
• success
• info

| || |----------------|-------------------------------| |type|String|
|default|warning|
|required|false|

active

you can active or deactivate bar | || |----------------|-------------------------------| |type|Boolean|
|default|true|
|required|false|

height

You can set your bar height as well

| height | class| |----------------|-------------------------------| |5px|hc-progress.progress-xs|
|10px|hc-progress.progress-sm|
|15px|hc-progress.progress-md | |20px|hc-progress.progress-lg| |25px|hc-progress.progress-xl|

Striped

Add .hc-progress-bar-striped to any .hc-progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.