Bootstrap 4 Demo
Bootstrap 4 Code
Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div class="container"> <h3 class="text-success">bg-info</h3> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-info w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">50%</div> </div> <h5 class="text-success">bg-success</h5> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width:33%" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">33%</div> </div> <h5 class="text-success">bg-warning</h5> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div> </div> <h5 class="text-success">bg-danger</h5> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width:52%" role="progressbar" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100">52%</div> </div> <h5 class="text-success">bg-light</h5> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-light w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <h5 class="text-success">bg-dark</h5> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-dark" style="width:65%">65%</div> </div> <h5 class="text-success">bg-primary</h5> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" style="width:77%" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100">77%</div> </div> <h5 class="text-success">bg-secondary</h5> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-secondary" style="width:64%">64%</div> </div> </div> </body> </html>
bg-info
50%
bg-success
33%
bg-warning
50%
bg-danger
52%
bg-light
25%
bg-dark
65%
bg-primary
77%
bg-secondary
64%