Bootstrap 3 - Progress Bar with Circle

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="form-group">
    <label for="" class="control-label">Percent Complete:</label>
    <input type="text" class="form-control" value="60"/>    
</div>

<div class="progress">
    <div class="progress-bar progress-bar-success"
         role="progressbar" 
         aria-valuenow="60" aria-valuemin="0" 
         aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>






<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/24741370/1366033'>Adding a graphic to Bootstrap progress bar</a><br/>
    Fork This Skeleton Here: <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootstrap 3.0 Skeleton</a><br/>
<div>

CSS

.progress {
    overflow: visible;
}
.progress-bar {
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}
.progress-bar:after {
    content:"";
    background-color: darkgreen;
    
    width: 30px;
    height: 30px;
    margin-right: -15px;         /* - 30/2 */
    margin-top: -5px;            /* - (30-20)/2 */
    -webkit-border-radius: 15px; /* 30/2 */
       -moz-border-radius: 15px; 
            border-radius: 15px;
    
    float: right;
}

JavaScript

$('input').on('keyup', function(){
    var value = this.value;
    $('.progress-bar')
        .css('width', value+'%')
        .attr('aria-valuenow', value);    
}).keyup();