how to add bootstrap progress bar to angular countdown timer

Question

I want to add bootstrap progress bar to angular countdown timer. Here is my app.js

function AlbumCtrl($scope,$timeout) {
    $scope.counter = 100;
    $scope.onTimeout = function(){
        $scope.counter--;
        mytimeout = $timeout($scope.onTimeout,1000);
    }
    var mytimeout = $timeout($scope.onTimeout,1000);

    $scope.stop = function(){
        $timeout.cancel(mytimeout);
    }
}

The problem is pretty clear in the title but @chetan perhaps you can explain what you have tried? — IfTrue
– IfTrue, Commented Sep 17, 2015 at 12:30

dcohenb · Accepted Answer · 2015-09-17 12:48:20Z

3

Depends on what version of bootstrap you use.

Angular UI Bootstrap

<div ng-controller="AlbumCtrl">
    <progressbar value="counter"></progressbar>
</div>

Boortstrap 3

<div ng-controller="AlbumCtrl">    
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="{{counter}}" aria-valuemin="0" aria-valuemax="100" ng-style="{width:counter+'%'}">
            <span class="sr-only">{{counter}}% Complete</span>
        </div>
    </div>
</div>

edited Sep 17, 2015 at 12:48

answered Sep 17, 2015 at 12:40

dcohenb

2,1271 gold badge18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ch3t Over a year ago

when I set $scope.counter = 600; progress bar doesn't work. any help as i want to increase my counter beyond 100

dcohenb Over a year ago

You need to define a range. if you're using angular-ui you can set it with a max attribute max=600 for example the regular bootstrap has aria-valuemax="600"

ch3t Over a year ago

i did this in first attempt iteself but it's not working

dcohenb Over a year ago

You are missing this in your plunkr: ng-style="{width:counter/600*100+'%'}"

ch3t Over a year ago

thank you so much, i appreciate your help. it's working:)

|

MoLow · Accepted Answer · 2015-09-17 12:39:18Z

2

you could use bootstrap ui built-in directive: https://angular-ui.github.io/bootstrap/#/progressbar

here is a plunkr based on your code: http://plnkr.co/edit/jC1GLH6Nfo6oQqq5um40?p=preview

html:

<div ng-controller="ProgressCtrl">
    <h3>Static</h3>
    <div class="row">
        <div class="col-sm-4"><progressbar value="counter"></progressbar></div>
    </div>
</div>

answered Sep 17, 2015 at 12:39

MoLow

3,0642 gold badges23 silver badges41 bronze badges

Collectives™ on Stack Overflow

how to add bootstrap progress bar to angular countdown timer

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related