Bootstrap 3 Skeleton
This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="col-sm-12 counter-center">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"
style="width:50%">
<div class="progress-arrows" style="margin-left:50%;"></div>
<span>50%</span>
</div>
</div>
</div>
CSS
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.counter-center{
margin-top:20px;
}
.counter-center .progress {
height: 70px;
margin-top: 5px;
background-image: -webkit-linear-gradient(top, #bf1717 0, #bf1717 100%);
background-image: -o-linear-gradient(top, #bf1717 0, #bf1717 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#bf1717), to(#bf1717));
background-image: linear-gradient(to bottom, #bf1717 0, #bf1717 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf1717', endColorstr='#bf1717', GradientType=0);
background-repeat: repeat-x;
border-radius: 10px;
}
.progress-bar {
background-image: -webkit-linear-gradient(top, #bf1717 0, #bf1717 100%);
background-image: -o-linear-gradient(top, #bf1717 0, #bf1717 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#bf1717), to(#bf1717));
background-image: linear-gradient(to bottom, #bf1717 0, #bf1717 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf1717', endColorstr='#bf1717', GradientType=0);
}
.counter-center .progress span {
color: #fff;
font-weight: 300;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
display: block;
margin-top: 25px;
font-size: 35px;
}
.counter-center .progress-arrows {
background: url(http://i.imgur.com/6FSuJHB.png);
z-index: 9999;
width: 33px;
height: 97px;
position: absolute;
margin-left: 38px;
margin-top: -15px;
}