Default Progress bars
Default progress bar style
<ProgressBar now={60} variant="danger" />
Striped Progress bar
add .progress-bar-striped to change the style
<ProgressBar now={85} variant="info" striped />
Colored Progress bar
add bg-primary, .bg-danger, .bg-info to change the style
<Card.Body>
{progressBarData.map((data, i) => (
<ProgressBar
now={data.value}
variant={data.variant}
key={i}
className="mt-3"
/>
))}
</Card.Body>
Different bar sizes
add bg-primary, .bg-danger, .bg-info to change the style
<Card.Body>
{progressBarData.map(
(data, i) =>
i !== progressBarData.length - 1 && (
<ProgressBar
now={data.value}
variant={data.variant}
key={i}
className="mt-3"
/>
)
)}
</Card.Body>
Animated Striped bar
add bg-primary, .bg-danger, .bg-info to change the style
<Card.Body>
{progressBarData.map(
(data, i) =>
i !== progressBarData.length - 1 && (
<ProgressBar
now={data.value}
variant={data.variant}
key={i}
className="mt-3"
striped
/>
)
)}
</Card.Body>
Vertical Progress bars
add .progress-vertical to change the style
<Card.Body>
{progressBarData.map(
(data, i) =>
i !== progressBarData.length - 1 && (
<ProgressBar
className=" progress-vertical"
now={data.variant}
key={i}
>
<ProgressBar
key={i}
style={{
width: "4px",
height: `${data.value}%`,
}}
variant={data.variant}
/>
</ProgressBar>
)
)}
</Card.Body>
Vertical Progress From bottom
add .progress-vertical to change the style
<Card.Body>
{progressBarData.map(
(data, i) =>
i !== progressBarData.length - 1 && (
<ProgressBar
className=" progress-vertical-bottom"
now={data.variant}
key={i}
>
<ProgressBar
key={i}
style={{
width: "4px",
height: `${data.value}%`,
}}
variant={data.variant}
/>
</ProgressBar>
)
)}
</Card.Body>
Different size Progress bars
add .progress-vertical to change the style
<Card.Body>
{progressBarData.map(
(data, i) =>
i !== progressBarData.length - 1 && (
<ProgressBar
className=" progress-vertical"
now={data.variant}
key={i}
>
<ProgressBar
key={i}
style={{
width: `${`${4 + i * 2}px`}`,
height: `${data.value}%`,
}}
variant={data.variant}
/>
</ProgressBar>
)
)}
</Card.Body>
Animated bars
add .progress-vertical to change the style
<Card.Body>
{progressBarData.map(
(data, i) =>
i !== progressBarData.length - 1 && (
<ProgressBar
now={data.value}
variant={data.variant}
key={i}
className="mt-3"
/>
)
)}{" "}
</Card.Body>
Skill Bars
add .progress-animated to change the style
Photoshop 85%
Code editor 90%
Illustrator 65%
<Card.Body>
<h6>
Photoshop
<span className="float-end">85%</span>
</h6>
<ProgressBar now={85} variant="danger" />
<h6 className="mt-4">
Code editor
<span className="float-end">90%</span>
</h6>
<ProgressBar now="90" variant="info" />
<h6 className="mt-4">
Illustrator
<span className="float-end">65%</span>
</h6>
<ProgressBar now={65} variant="success" />
</Card.Body>