@acodez/progressbar

progressbar with many customizations

Usage no npm install needed!

<script type="module">
  import acodezProgressbar from 'https://cdn.skypack.dev/@acodez/progressbar';
</script>

README

@acodez/progressbar

npm_version license

React progressbar with many customizations.

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