Bootstrap 3 Progress Bar Skinny with Animation and Angular values

Bootstrap 3 Progress Bar Skinny with Animation and Angular values - Andrew Pougher

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<div ng-app="drew" ng-controller="apcntrl">
    <div class="container">
        <div class="row">
             <h3 class="lead">Andrews Super Skinny Angular BS progress bar</h3>

            <div class="col-xs-4">
                <div class="progress progress-andrew">
                    <div data-percentage="0%" style="width: {{progressingbar}}" class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
               
            </div>
            <div class="col-xs-4">
                <div class="progress progress-andrew">
                    <div class="progress-bar" data-percentage="0%" role="progressbar" aria-valuenow="{{progressingbar}}" aria-valuemin="0" aria-valuemax="100" style="width: {{progressingbar}};"> <span class="sr-only">{{progressingbar}} Complete</span>

                    </div>
                </div>
                <img src="http://www.placehold.it/250/34cc57/&text=Pougher" class="img-responsive">
            </div>
        </div>
    </div>
</div>

CSS

body {
    background:#ececec
}
.progress {
    height: 5px;
    background-color: #white;
    background-image: none;
    box-shadow: none;
    border-radius:0;
    margin:0;
}
.sr-only {
    font-size:8px
}
.progress-andrew .progress-bar {
    background-color: #0AA699;
    background-image: none;
}
.col-xs-4 {
    border:1px solid #ddd;
    padding:0;
}

JavaScript

var andrewsAPP = angular.module('drew', []);
andrewsAPP.controller("apcntrl", function ($scope) {
    $scope.progressingbar = 34 + '%';
});
/* As you can see I am emulating the scenario of having loading bars on each image as it appears (or uploads). You should use whatever system you wish to integrate the % loaded based on the file size */