Bootstrap progress bar timer

First of, hello, I am using Angular.js, Bootstrap, HTML, and JavaScript (obv these 2).

So, I have the following bootstrap progress bar in my APP:

<div class="progress">
    <div id="theBar" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
        60%
    </div>
</div>

Now, I'd like it to decrease from 100% to 0% ( each percentage being 1 second), the point would be to make a timer out of it, in which after it reaches zero, the user can no longer perform a specified action. I really have no clue how to do is, or if it is even possible using bootstraps progress bar, Thank you in advance and best regards.

Answers


// Code goes here

var i = 100;

var counterBack = setInterval(function(){
  i--;
  if(i>0){
    $('.progress-bar').css('width', i+'%');
  } else {
    clearTimeout(counterBack);
  }

}, 1000);

Here is the demo: http://plnkr.co/edit/BlAZ7utewsWOIsVtl5qQ?p=preview No AngularJS involved.


Need Your Help

dart HTML TableCellElement - cannot get or set colspan

html dynamic dart cell html-table

I am creating a HTML table inside the dart code. then i add rows to the table (TableRowElement) and cells (TableCellElement) to the rows. Then I want to set the colspan of the cells. Or even print ...

Synergy dbr.exe getting System.ServiceModel.FaultException during xcall

c# asp.net .net web-services synergy-dbl

We have Synergy application that uses Synergy's xcall function to load a (COM interop?) assembly (ImageRetrieval.dll) and call methods from it.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.