@acodez/progressbar

React progressbar with many customizations.

• Installation
• PropsAPI
• Usage

Installation

npm install @acodez/progressbar

Props 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" />