<title>Bootstrap Progress Bar Striped</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
<h2>Bootstrap Progress Bar Striped</h2>
<div class="progress-bar progress-bar-success progress-bar-striped" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;">
<span class="sr-only">60% Complete (Success)</span>
<div class="progress-bar progress-bar-info progress-bar-striped" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%;">
<span class="sr-only">40% Complete (Info)</span>
<div class="progress-bar progress-bar-warning progress-bar-striped" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%;">
<span class="sr-only">20% Complete (Warning)</span>
<div class="progress-bar progress-bar-danger progress-bar-striped" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%;">
<span class="sr-only">30% Complete (Error)</span>