Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <div id='procNum'></div>
        <div id='procMovie'></div>
    <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 40%;-webkit-transition: none;transition: none;">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

JavaScript

var inc = 0;
var maxc = 8;
var a = [1,2,3,4,5,6,7,8,9]
var rawListNum = 8
var delay = 0; // delay milliseconds
var iID = setInterval(function () {

    var index = inc;
    var movie = a[inc];

    //start processing function


    //styling while processing    

    var markerPer = ((index + 1) / rawListNum) * 100; // marker percentage
    console.log(markerPer);
    $("#procNum").text("(" + (index + 1) + "/" + rawListNum + ")"); //Processing number
    $("#procMovie").text(movie); //Processing Name

    $(".progress-bar").css("width", markerPer + "%").attr("aria-valuenow", markerPer); // progress bar -> DOES NOT WORK

    if (++inc >= maxc) clearInterval(iID);

},
delay);