-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
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) |