/jquery-progressTimer

Primary LanguageJavaScriptMIT LicenseMIT

Bower version devDependency Status Dependency Status Build Status Codacy Badge

jQuery Progress timer is a jquery extension that extends the functionality of the Bootstrap progress bar component

  • REQUIRES Bootstrap 3.2.0 or greater.

Table of contents

Quick start

Three quick start options are available:

  • Clone the repo: git clone https://github.com/tnory56/jquery-progressTimer.git.
  • Install with Bower: bower install jquery-progresstimer.
  • See the demo page Demo for usage and possibilities

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

jquery-progresstimer/
├── demo/
│	├── css/
│	│	├── static.css
│	│	└── static.min.css
│	├── fonts/
│	│	├── glyphicons-halflings-regular.eot
│	│	├── glyphicons-halflings-regular.svg
│	│	├── glyphicons-halflings-regular.ttf
│	│	└── glyphicons-halflings-regular.woff
│	├── js/
│	│	├── static.js
│	│	└── static.min.js
│	├── demo.css
│	└── index.html
├── dist/
│	├── css/
│	│	└── jquery.progresstimer.css
│	└── js/
│		├── jquery.progresstimer.js
│		└── jquery.progresstimer.min.js
├── src/
│	├── css/
│	└── js/
├── bower.json
├── Gruntfile.js
├── LICENSE
├── package.json
└── README.md

Simple Example

<div class="container">
    <div class="loading-progress"></div>
</div>
<script src="js/static.min.js"></script>
<script src="../dist/js/jquery.progresstimer.js"></script>
<script>
    var progress = $(".loading-progress").progressTimer({
        timeLimit: 10,
        onFinish: function () {
            alert('completed!');
        }
    });
    $.ajax({
       url:"http://localhost/"
    }).error(function(){
        progress.progressTimer('error', {
            errorText:'ERROR!',
            onFinish:function(){
                alert('There was an error processing your information!');
            }
        });
    }).done(function(){
        progress.progressTimer('complete');
    });
</script>