1.0.3 • Published 3 years ago
@acodez/progressbar v1.0.3
@acodez/progressbar
React progressbar with many customizations.
Installation
npm install @acodez/progressbarProps API
| Property | Type | Required | Description |
|---|---|---|---|
| progress | string | yes | progress value, example 30 |
| color | string | no | color scheme, choose from primary, secondary, warning, success, danger, info, dark, light |
| type | string | no | choose from normal, striped, animate, animate-striped |
| size | string | no | size (height) of progressbar, choose from xs, sm, md, lg |
| ShowProgressCount | string | no | whether count need to show near to bar |
| CountPosition | string | no | progress count position, choose from overlay, right, left |
| corner | string | no | progressbar border radius, square or rounded |
Usage
import Progressbar from "@acodez/progressbar";Basic
<Progressbar progress="70" />Animating progressbar
<Progressbar progress="70" type="animate" />Striped progressbar
<Progressbar progress="70" type="striped" />Striped with animation
<Progressbar progress="70" type="animate-striped" />With progress text
<Progressbar progress="70" ShowProgressCount />Text position to right
<Progressbar progress="70" ShowProgressCount CountPosition="right" />Changing the color theme
<Progressbar progress="70" color="danger" />Changing the size - height
<Progressbar progress="70" size="lg" />Changing the border radius
<Progressbar progress="70" corner="square" />