Progress Bar React Component

Progress Bar React component represents Progress Bar element.

Usage example

<!-- Determinate Progress Bar -->
<Progressbar progress={20}></Progressbar>
 
<!-- Determinate Red Progress Bar -->
<Progressbar progress={30} color="red"></Progressbar>
 
<!-- Infinite Blue Progress Bar -->
<Progressbar infinite color="blue"></Progressbar>
 
<!-- Infinite Multi-color Progress Bar -->
<Progressbar infinite color="multi"></Progressbar>

Renders to:

<!-- Determinate Progress Bar -->
<span class="progressbar" data-progress="20"><span></span></span>
 
<!-- Determinate Red Progress Bar -->
<span class="progressbar color-red" data-progress="30"><span></span></span>
 
<!-- Infinite Blue Progress Bar -->
<span class="progressbar progressbar-infinite color-blue"><span></span></span>
 
<!-- Infinite Multi-color Progress Bar -->
<span class="progressbar progressbar-infinite color-multi"><span></span></span>

Properties

Prop	Type	Default	Description
color	string		Progress bar color. One of default colors
progress	number		Determinate progress (from 0 to 100)
infinite	boolean		Whether progress bar is infinite or not (determinate)