<div class="progress" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 25%">25%</div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 100%"></div>
</div>

<div class="progress" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary" style="width: 10%">10%</div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-info" style="width: 25%">25%</div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar text-bg-warning" style="width: 50%">50%</div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-danger" style="width: 75%">75%</div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 100%">100%</div>
</div>

<div class="progress" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped bg-primary" style="width: 10%">10%</div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped bg-info" style="width: 25%">25%</div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped text-bg-warning" style="width: 50%">50%</div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped bg-danger" style="width: 75%">75%</div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped" style="width: 100%">100%</div>
</div>

<div class="progress" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" style="width: 10%">10%</div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style="width: 25%">25%</div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped text-bg-warning" style="width: 50%">50%</div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 75%">75%</div>
</div>
<div class="progress" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-black" style="width: 100%">100%</div>
</div>