<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
</head>
<body>
<div class="container mt-5">
<div class="title">
<h3>Progress Bars</h3>
</div>
<div class="row">
<div class="col-md-6">
<div class="progress progress-line-info">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
<span class="sr-only">70% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-line-primary">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
<span class="sr-only">30% Complete</span>
</div>
</div>
<div class="progress progress-line-info">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-line-success">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
<span class="sr-only">45% Complete</span>
</div>
</div>
<div class="progress progress-line-warning">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress progress-line-danger">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span class="sr-only">80% Complete</span>
</div>
</div>
<div class="progress progress-line-danger">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center ">
<p>Made with <a href="https://demos.creative-tim.com/material-kit/index.html" target="_blank">Material Kit</a> by Creative Tim</p>
</footer>
</body>
html *{
-webkit-font-smoothing: antialiased;
}
.title h3{
font-size: 25px !important;
margin-top: 20px;
margin-bottom: 25px;
line-height: 1.4em !important;
font-weight: 300;
}
.progress {
height: 4px;
border-radius: 0;
background: #DDD;
margin-bottom: 20px;
}
/* footer */
footer{
margin-top: 20px;
color: #555;
background: #fff;
padding: 25px;
font-weight: 300;
}
.footer p{
margin-bottom: 0;
font-size: 14px;
font-weight: 300;
}
footer p a{
color: #555;
font-weight: 400;
}
footer p a:hover {
color: #9f26aa;
text-decoration: none;
}
.progress.progress-line-primary {
background: rgba(156,39,176,.2);
}
.progress .progress-bar.progress-bar-primary {
background: #9c27b0!important;
}
.progress.progress-line-info {
background: rgba(0,188,212,.2);
}
.progress .progress-bar.progress-bar-info {
background: #00bcd4;
}
.progress.progress-line-danger {
background: rgba(244,67,54,.2);
}
.progress .progress-bar.progress-bar-danger {
background: #f44336;
}
.progress.progress-line-success {
background: rgba(76,175,80,.2);
}
.progress .progress-bar.progress-bar-success {
background: #4caf50;
}
.progress.progress-line-warning {
background: rgba(255,152,0,.2);
}
.progress .progress-bar.progress-bar-warning {
background: #ff9800;
}
