Full Code of rstacruz/nprogress for AI

Repository: rstacruz/nprogress
Branch: master
Commit: e1a8b7fb6e05
Files: 18
Total size: 40.1 KB

Directory structure:
gitextract_xsivouz_/

├── .gitignore
├── .npmignore
├── .travis.yml
├── History.md
├── License.md
├── Notes.md
├── Readme.md
├── bower.json
├── component.json
├── index.html
├── nprogress.css
├── nprogress.js
├── package.json
├── support/
│   ├── extras.css
│   └── style.css
└── test/
    ├── component.html
    ├── index.html
    └── test.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
node_modules
build
components


================================================
FILE: .npmignore
================================================
vendor
index.html
support


================================================
FILE: .travis.yml
================================================
language: node_js
node_js: ["iojs"]


================================================
FILE: History.md
================================================
## [v0.2.0] - May 13, 2015

This is a maintenance release with cleanups. No functionality changes were introduced.

 * [#93] - Remove jQuery dependency in component ([@slang800])
 * [#120] - Fix the Readme showing a wrong example for `ease` ([@teeceepee])

Minor changes:

 * [#92] - Fix typo in Readme ([@FND])
 * [#90] - Fix typo in Readme ([@mdxs])
 * [#119] - Fix typo in Readme ([@infertux])
 * [#53] - Use `===` instead of `==` ([@drodil])
 * Update test dependencies

## [v0.1.6] - June 25, 2014

 * [#86] - Add support for specifying a different parent container. ([@jonjaques], [#14], [#33], [#39])
 * [#64] - Fix Require.js support ([#75], [#85])
 * [#54] - Fix component support

## [v0.1.5] - June 21, 2014

 * [#82] - Release properly to the npm registry

## [v0.1.4] - June 21, 2014

 * [#65] - Bower: don't download package.json. Fixes browserify + jquery problem. ([@amelon])
 * [#75] - Fix compatibility with Karma. ([@shaqq])
 
Internal changes:

 * [#77] - Use SVG to display Travis-CI badge. ([@Mithgol])
 * [#34] - Readme: update .inc() and .status docs ([@lacivert])
 * [#73] - Readme: update year ([@rwholmes])

## [v0.1.3] - March 26, 2014

 * [#7] - Remove jQuery dependency ([#28], [#17], [@rurjur])
 * [#73] - Update Readme to change year to 2014. ([@rwholmes])

## [v0.1.2] - August 21, 2013

Minor update for proper [Bower] and [Component] support.

 * Add Bower support.
 * Fix Component support and use `component/jquery` as a dependency.

## [v0.1.1] - August 21, 2013

Minor fixes.

 * Removed the busy cursor that occurs when loading.
 * Added support for IE7 to IE9. ([#3], [@markbao])
 * Implement `trickleRate` and `trickleSpeed` options.
 * [#5] - Implement the `showSpinner` option to allow removing the spinner. ([#9], [@rahulcs])
 * Registered as a Component in Component.io.
 * [#8] - Updated the Readme with better Turbolinks instructions.

## v0.1.0 - August 20, 2013

Initial release.

[Bower]: http://bower.io
[Component]: http://component.io
[#119]: https://github.com/rstacruz/nprogress/issues/119
[#120]: https://github.com/rstacruz/nprogress/issues/120
[#14]: https://github.com/rstacruz/nprogress/issues/14
[#17]: https://github.com/rstacruz/nprogress/issues/17
[#28]: https://github.com/rstacruz/nprogress/issues/28
[#33]: https://github.com/rstacruz/nprogress/issues/33
[#34]: https://github.com/rstacruz/nprogress/issues/34
[#39]: https://github.com/rstacruz/nprogress/issues/39
[#3]: https://github.com/rstacruz/nprogress/issues/3
[#54]: https://github.com/rstacruz/nprogress/issues/84
[#5]: https://github.com/rstacruz/nprogress/issues/5
[#64]: https://github.com/rstacruz/nprogress/issues/64
[#65]: https://github.com/rstacruz/nprogress/issues/65
[#73]: https://github.com/rstacruz/nprogress/issues/73
[#75]: https://github.com/rstacruz/nprogress/issues/75
[#77]: https://github.com/rstacruz/nprogress/issues/77
[#7]: https://github.com/rstacruz/nprogress/issues/7
[#82]: https://github.com/rstacruz/nprogress/issues/82
[#84]: https://github.com/rstacruz/nprogress/issues/84
[#85]: https://github.com/rstacruz/nprogress/issues/85
[#86]: https://github.com/rstacruz/nprogress/issues/86
[#8]: https://github.com/rstacruz/nprogress/issues/8
[#90]: https://github.com/rstacruz/nprogress/issues/90
[#92]: https://github.com/rstacruz/nprogress/issues/92
[#93]: https://github.com/rstacruz/nprogress/issues/93
[#9]: https://github.com/rstacruz/nprogress/issues/9
[@slang800]: https://github.com/slang800
[@teeceepee]: https://github.com/teeceepee
[@FND]: https://github.com/FND
[@mdxs]: https://github.com/mdxs
[@infertux]: https://github.com/infertux
[@jonjaques]: https://github.com/jonjaques
[@amelon]: https://github.com/amelon
[@shaqq]: https://github.com/shaqq
[@Mithgol]: https://github.com/Mithgol
[@lacivert]: https://github.com/lacivert
[@rwholmes]: https://github.com/rwholmes
[@rurjur]: https://github.com/rurjur
[@markbao]: https://github.com/markbao
[@rahulcs]: https://github.com/rahulcs
[v0.1.6]: https://github.com/rstacruz/nprogress/compare/v0.1.5...v0.1.6
[v0.1.5]: https://github.com/rstacruz/nprogress/compare/v0.1.4...v0.1.5
[v0.1.4]: https://github.com/rstacruz/nprogress/compare/v0.1.3...v0.1.4
[v0.1.3]: https://github.com/rstacruz/nprogress/compare/v0.1.2...v0.1.3
[v0.1.2]: https://github.com/rstacruz/nprogress/compare/v0.1.1...v0.1.2
[v0.1.1]: https://github.com/rstacruz/nprogress/compare/v0.1.0...v0.1.1
[#53]: https://github.com/rstacruz/nprogress/issues/53
[v0.2.0]: https://github.com/rstacruz/nprogress/compare/v0.1.6...v0.2.0
[@drodil]: https://github.com/drodil


================================================
FILE: License.md
================================================
Copyright (c) 2013-2014 Rico Sta. Cruz

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.


================================================
FILE: Notes.md
================================================
Testing
-------

    $ npm install
    $ npm test

or try it out in the browser:

    $ open test/index.html

Testing component build
-----------------------

    $ component install
    $ component build
    $ open test/component.html

Releasing
---------

    $ npm test
    $ bump *.json nprogress.js          # bump version numbers
    $ git release 0.1.1                 # release to bower/github
    $ npm publish                       # release to npm
    $ git push origin master:gh-pages   # update the site


================================================
FILE: Readme.md
================================================
NProgress
=========

[![Status](https://api.travis-ci.org/rstacruz/nprogress.svg?branch=master)](http://travis-ci.org/rstacruz/nprogress) 
[![npm version](https://img.shields.io/npm/v/nprogress.png)](https://npmjs.org/package/nprogress "View this project on npm")
[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/nprogress/badge?style=rounded)](https://www.jsdelivr.com/package/npm/nprogress)

> Minimalist progress bar

Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and
Medium.

Installation
------------

Add [nprogress.js] and [nprogress.css] to your project.

```html
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
```

NProgress is available via [bower] and [npm].

    $ npm install --save nprogress

Also available via [unpkg] CDN:

- https://unpkg.com/nprogress@0.2.0/nprogress.js
- https://unpkg.com/nprogress@0.2.0/nprogress.css

[bower]: http://bower.io/search/?q=nprogress
[npm]: https://www.npmjs.org/package/nprogress
[unpkg]: https://unpkg.com/

Basic usage
-----------

Simply call `start()` and `done()` to control the progress bar.

~~~ js
NProgress.start();
NProgress.done();
~~~

### Turbolinks (version 5+)
Ensure you're using Turbolinks 5+, and use 
this: (explained [here](https://github.com/rstacruz/nprogress/issues/8#issuecomment-239107109))

~~~ js
$(document).on('turbolinks:click', function() {
  NProgress.start();
});
$(document).on('turbolinks:render', function() {
  NProgress.done();
  NProgress.remove();
});
~~~

### Turbolinks (version 3 and below)
Ensure you're using Turbolinks 1.3.0+, and use 
this: (explained [here](https://github.com/rstacruz/nprogress/issues/8#issuecomment-23010560))

~~~ js
$(document).on('page:fetch',   function() { NProgress.start(); });
$(document).on('page:change',  function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });
~~~

### Pjax
Try this: (explained [here](https://github.com/rstacruz/nprogress/issues/22#issuecomment-36540472))

~~~ js
$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end',   function() { NProgress.done();  });
~~~

Ideas
-----

 * Add progress to your Ajax calls! Bind it to the jQuery `ajaxStart` and
 `ajaxStop` events.

 * Make a fancy loading bar even without Turbolinks/Pjax! Bind it to
 `$(document).ready` and `$(window).load`.

Advanced usage
--------------

__Percentages:__ To set a progress percentage, call `.set(n)`, where *n* is a
number between `0..1`.

~~~ js
NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()
~~~

__Incrementing:__ To increment the progress bar, just use `.inc()`. This
increments it with a random amount. This will never get to 100%: use it for
every image load (or similar).

~~~ js
NProgress.inc();
~~~

If you want to increment by a specific value, you can pass that as a parameter:

~~~ js
NProgress.inc(0.2);    // This will get the current status value and adds 0.2 until status is 0.994
~~~

__Force-done:__ By passing `true` to `done()`, it will show the progress bar
even if it's not being shown. (The default behavior is that *.done()* will not
    do anything if *.start()* isn't called)

~~~ js
NProgress.done(true);
~~~

__Get the status value:__ To get the status value, use `.status`

Configuration
-------------

#### `minimum`
Changes the minimum percentage used upon starting. (default: `0.08`)

~~~ js
NProgress.configure({ minimum: 0.1 });
~~~

#### `template`
You can change the markup using `template`. To keep the progress
bar working, keep an element with `role='bar'` in there. See the [default template]
for reference.

~~~ js
NProgress.configure({
  template: "<div class='....'>...</div>"
});
~~~

#### `easing` and `speed`
Adjust animation settings using *easing* (a CSS easing string)
and *speed* (in ms). (default: `ease` and `200`)

~~~ js
NProgress.configure({ easing: 'ease', speed: 500 });
~~~

#### `trickle`
Turn off the automatic incrementing behavior by setting this to `false`. (default: `true`)

~~~ js
NProgress.configure({ trickle: false });
~~~

#### `trickleSpeed`
Adjust how often to trickle/increment, in ms.

~~~ js
NProgress.configure({ trickleSpeed: 200 });
~~~

#### `showSpinner`
Turn off loading spinner by setting it to false. (default: `true`)

~~~ js
NProgress.configure({ showSpinner: false });
~~~

#### `parent`
specify this to change the parent container. (default: `body`)

~~~ js
NProgress.configure({ parent: '#container' });
~~~

Customization
-------------

Just edit `nprogress.css` to your liking. Tip: you probably only want to find
and replace occurrences of `#29d`.

The included CSS file is pretty minimal... in fact, feel free to scrap it and
make your own!

Resources
---------

 * [New UI Pattern: Website Loading Bars](http://www.usabilitypost.com/2013/08/19/new-ui-pattern-website-loading-bars/) (usabilitypost.com)

Support
-------

__Bugs and requests__: submit them through the project's issues tracker.<br>
[![Issues](http://img.shields.io/github/issues/rstacruz/nprogress.svg)]( https://github.com/rstacruz/nprogress/issues )

__Questions__: ask them at StackOverflow with the tag *nprogress*.<br>
[![StackOverflow](http://img.shields.io/badge/stackoverflow-nprogress-brightgreen.svg)]( http://stackoverflow.com/questions/tagged/nprogress )

__Chat__: join us at gitter.im.<br>
[![Chat](http://img.shields.io/badge/gitter-rstacruz/nprogress-brightgreen.svg)]( https://gitter.im/rstacruz/nprogress )

[default template]: https://github.com/rstacruz/nprogress/blob/master/nprogress.js#L31
[Turbolinks]: https://github.com/rails/turbolinks
[nprogress.js]: http://ricostacruz.com/nprogress/nprogress.js
[nprogress.css]: http://ricostacruz.com/nprogress/nprogress.css

Thanks
------

**NProgress** © 2013-2017, Rico Sta. Cruz. Released under the [MIT License].<br>
Authored and maintained by Rico Sta. Cruz with help from [contributors].

> [ricostacruz.com](http://ricostacruz.com) &nbsp;&middot;&nbsp;
> GitHub [@rstacruz](https://github.com/rstacruz) &nbsp;&middot;&nbsp;
> Twitter [@rstacruz](https://twitter.com/rstacruz)

[MIT License]: http://mit-license.org/
[contributors]: http://github.com/rstacruz/nprogress/contributors

[![](https://img.shields.io/github/followers/rstacruz.svg?style=social&label=@rstacruz)](https://github.com/rstacruz) &nbsp;
[![](https://img.shields.io/twitter/follow/rstacruz.svg?style=social&label=@rstacruz)](https://twitter.com/rstacruz)


================================================
FILE: bower.json
================================================
{
  "name": "nprogress",
  "repo": "rstacruz/nprogress",
  "description": "slim progress bar",
  "version": "0.2.0",
  "keywords": [
    "progress",
    "bar",
    "spinner"
  ],
  "license": "MIT",
  "main": ["nprogress.js", "nprogress.css"],
  "scripts": [
    "nprogress.js"
  ],
  "styles": [
    "nprogress.css"
  ],
  "ignore": [
    "**/.*",
    "node_modules",
    "components",
    "package.json",
    "test",
    "vendor"
  ]
}


================================================
FILE: component.json
================================================
{
  "name": "nprogress",
  "repo": "rstacruz/nprogress",
  "description": "slim progress bar",
  "version": "0.2.0",
  "keywords": ["progress","bar","spinner"],
  "development": {
    "chaijs/chai": "*",
    "visionmedia/mocha": "*"
  },
  "license": "MIT",
  "main": "nprogress.js",
  "scripts": [
    "nprogress.js"
  ],
  "styles": [
    "nprogress.css"
  ]
}


================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>NProgress: slim progress bars in JavaScript</title>
  <link href='support/style.css' rel='stylesheet' />
  <link href='nprogress.css' rel='stylesheet' />

  <meta name="viewport" content="width=device-width">
  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,400italic' rel='stylesheet' type='text/css'>
  
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src='nprogress.js'></script>

  <script>if(location.hostname.match(/ricostacruz\.com$/)){var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-20473929-1"]),_gaq.push(["_trackPageview"]),function(){var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)}()}</script>
</head>

<body style='display: none'>
  <header class='page-header'>
    <span class='nprogress-logo fade out'></span>
    <h1>NProgress<i>.js</i></h1>
    <p class='fade out brief big'>A nanoscopic progress bar. Featuring realistic
    trickle animations to convince your users that something is happening!</p>
  </header>

  <div class='contents fade out'>
    <div class='controls'>
      <p>
        <button class='button play' id='b-0'></button>
        <i>NProgress</i><b>.start()</b>
        &mdash;
        shows the progress bar
      </p>
      <p>
        <button class='button play' id='b-40'></button>
        <i>NProgress</i><b>.set(0.4)</b>
        &mdash;
        sets a percentage
      </p>
      <p>
        <button class='button play' id='b-inc'></button>
        <i>NProgress</i><b>.inc()</b>
        &mdash;
        increments by a little
      </p>
      <p>
        <button class='button play' id='b-100'></button>
        <i>NProgress</i><b>.done()</b>
        &mdash;
        completes the progress
      </p>
    </div>
    <div class='actions'>
      <a href='https://github.com/rstacruz/nprogress' class='button primary big'>
        Download
        v<span class='version'></span>
      </a>
      <p class='brief'>Perfect for Turbolinks, Pjax, and other Ajax-heavy apps.</p>
    </div>
    <div class='hr-rule'></div>
    <div class='share-buttons'>
      <iframe src="http://ghbtns.com/github-btn.html?user=rstacruz&repo=nprogress&type=watch&count=true"
          allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
      <iframe src="http://ghbtns.com/github-btn.html?user=rstacruz&type=follow&count=true"
          allowtransparency="true" frameborder="0" scrolling="0" width="175" height="20"></iframe>
      <a href="https://news.ycombinator.com/submit" class="hn-button" data-title="NProgress" data-url="http://ricostacruz.com/nprogress/" data-count="horizontal" data-style="twitter">HN</a>
    </div>
  </div>

  <script>
    $('body').show();
    $('.version').text(NProgress.version);
    NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);

    $("#b-0").click(function() { NProgress.start(); });
    $("#b-40").click(function() { NProgress.set(0.4); });
    $("#b-inc").click(function() { NProgress.inc(); });
    $("#b-100").click(function() { NProgress.done(); });
  </script>

  <script>var HN=[];HN.factory=function(e){return function(){HN.push([e].concat(Array.prototype.slice.call(arguments,0)))};},HN.on=HN.factory("on"),HN.once=HN.factory("once"),HN.off=HN.factory("off"),HN.emit=HN.factory("emit"),HN.load=function(){var e="hn-button.js";if(document.getElementById(e))return;var t=document.createElement("script");t.id=e,t.src="//hn-button.herokuapp.com/hn-button.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)},HN.load();</script>
</body>
</html>


================================================
FILE: nprogress.css
================================================
/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
      -ms-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



================================================
FILE: nprogress.js
================================================
/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
 * @license MIT */

;(function(root, factory) {

  if (typeof define === 'function' && define.amd) {
    define(factory);
  } else if (typeof exports === 'object') {
    module.exports = factory();
  } else {
    root.NProgress = factory();
  }

})(this, function() {
  var NProgress = {};

  NProgress.version = '0.2.0';

  var Settings = NProgress.settings = {
    minimum: 0.08,
    easing: 'linear',
    positionUsing: '',
    speed: 200,
    trickle: true,
    trickleSpeed: 200,
    showSpinner: true,
    barSelector: '[role="bar"]',
    spinnerSelector: '[role="spinner"]',
    parent: 'body',
    template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
  };

  /**
   * Updates configuration.
   *
   *     NProgress.configure({
   *       minimum: 0.1
   *     });
   */
  NProgress.configure = function(options) {
    var key, value;
    for (key in options) {
      value = options[key];
      if (value !== undefined && options.hasOwnProperty(key)) Settings[key] = value;
    }

    return this;
  };

  /**
   * Last number.
   */

  NProgress.status = null;

  /**
   * Sets the progress bar status, where `n` is a number from `0.0` to `1.0`.
   *
   *     NProgress.set(0.4);
   *     NProgress.set(1.0);
   */

  NProgress.set = function(n) {
    var started = NProgress.isStarted();

    n = clamp(n, Settings.minimum, 1);
    NProgress.status = (n === 1 ? null : n);

    var progress = NProgress.render(!started),
        bar      = progress.querySelector(Settings.barSelector),
        speed    = Settings.speed,
        ease     = Settings.easing;

    progress.offsetWidth; /* Repaint */

    queue(function(next) {
      // Set positionUsing if it hasn't already been set
      if (Settings.positionUsing === '') Settings.positionUsing = NProgress.getPositioningCSS();

      // Add transition
      css(bar, barPositionCSS(n, speed, ease));

      if (n === 1) {
        // Fade out
        css(progress, {
          transition: 'none',
          opacity: 1
        });
        progress.offsetWidth; /* Repaint */

        setTimeout(function() {
          css(progress, {
            transition: 'all ' + speed + 'ms linear',
            opacity: 0
          });
          setTimeout(function() {
            NProgress.remove();
            next();
          }, speed);
        }, speed);
      } else {
        setTimeout(next, speed);
      }
    });

    return this;
  };

  NProgress.isStarted = function() {
    return typeof NProgress.status === 'number';
  };

  /**
   * Shows the progress bar.
   * This is the same as setting the status to 0%, except that it doesn't go backwards.
   *
   *     NProgress.start();
   *
   */
  NProgress.start = function() {
    if (!NProgress.status) NProgress.set(0);

    var work = function() {
      setTimeout(function() {
        if (!NProgress.status) return;
        NProgress.trickle();
        work();
      }, Settings.trickleSpeed);
    };

    if (Settings.trickle) work();

    return this;
  };

  /**
   * Hides the progress bar.
   * This is the *sort of* the same as setting the status to 100%, with the
   * difference being `done()` makes some placebo effect of some realistic motion.
   *
   *     NProgress.done();
   *
   * If `true` is passed, it will show the progress bar even if its hidden.
   *
   *     NProgress.done(true);
   */

  NProgress.done = function(force) {
    if (!force && !NProgress.status) return this;

    return NProgress.inc(0.3 + 0.5 * Math.random()).set(1);
  };

  /**
   * Increments by a random amount.
   */

  NProgress.inc = function(amount) {
    var n = NProgress.status;

    if (!n) {
      return NProgress.start();
    } else if(n > 1) {
      return;
    } else {
      if (typeof amount !== 'number') {
        if (n >= 0 && n < 0.2) { amount = 0.1; }
        else if (n >= 0.2 && n < 0.5) { amount = 0.04; }
        else if (n >= 0.5 && n < 0.8) { amount = 0.02; }
        else if (n >= 0.8 && n < 0.99) { amount = 0.005; }
        else { amount = 0; }
      }

      n = clamp(n + amount, 0, 0.994);
      return NProgress.set(n);
    }
  };

  NProgress.trickle = function() {
    return NProgress.inc();
  };

  /**
   * Waits for all supplied jQuery promises and
   * increases the progress as the promises resolve.
   *
   * @param $promise jQUery Promise
   */
  (function() {
    var initial = 0, current = 0;

    NProgress.promise = function($promise) {
      if (!$promise || $promise.state() === "resolved") {
        return this;
      }

      if (current === 0) {
        NProgress.start();
      }

      initial++;
      current++;

      $promise.always(function() {
        current--;
        if (current === 0) {
            initial = 0;
            NProgress.done();
        } else {
            NProgress.set((initial - current) / initial);
        }
      });

      return this;
    };

  })();

  /**
   * (Internal) renders the progress bar markup based on the `template`
   * setting.
   */

  NProgress.render = function(fromStart) {
    if (NProgress.isRendered()) return document.getElementById('nprogress');

    addClass(document.documentElement, 'nprogress-busy');

    var progress = document.createElement('div');
    progress.id = 'nprogress';
    progress.innerHTML = Settings.template;



    var bar = progress.querySelector(Settings.barSelector),
        perc = fromStart ? '-100' : toBarPerc(NProgress.status || 0),
        parent = isDOM(Settings.parent)
          ? Settings.parent
          : document.querySelector(Settings.parent),
        spinner

    css(bar, {
      transition: 'all 0 linear',
      transform: 'translate3d(' + perc + '%,0,0)'
    });

    if (!Settings.showSpinner) {
      spinner = progress.querySelector(Settings.spinnerSelector);
      spinner && removeElement(spinner);
    }

    if (parent != document.body) {
      addClass(parent, 'nprogress-custom-parent');
    }

    parent.appendChild(progress);
    return progress;
  };

  /**
   * Removes the element. Opposite of render().
   */

  NProgress.remove = function() {
    removeClass(document.documentElement, 'nprogress-busy');
    var parent = isDOM(Settings.parent)
      ? Settings.parent
      : document.querySelector(Settings.parent)
    removeClass(parent, 'nprogress-custom-parent')
    var progress = document.getElementById('nprogress');
    progress && removeElement(progress);
  };

  /**
   * Checks if the progress bar is rendered.
   */

  NProgress.isRendered = function() {
    return !!document.getElementById('nprogress');
  };

  /**
   * Determine which positioning CSS rule to use.
   */

  NProgress.getPositioningCSS = function() {
    // Sniff on document.body.style
    var bodyStyle = document.body.style;

    // Sniff prefixes
    var vendorPrefix = ('WebkitTransform' in bodyStyle) ? 'Webkit' :
                       ('MozTransform' in bodyStyle) ? 'Moz' :
                       ('msTransform' in bodyStyle) ? 'ms' :
                       ('OTransform' in bodyStyle) ? 'O' : '';

    if (vendorPrefix + 'Perspective' in bodyStyle) {
      // Modern browsers with 3D support, e.g. Webkit, IE10
      return 'translate3d';
    } else if (vendorPrefix + 'Transform' in bodyStyle) {
      // Browsers without 3D support, e.g. IE9
      return 'translate';
    } else {
      // Browsers without translate() support, e.g. IE7-8
      return 'margin';
    }
  };

  /**
   * Helpers
   */

  function isDOM (obj) {
    if (typeof HTMLElement === 'object') {
      return obj instanceof HTMLElement
    }
    return (
      obj &&
      typeof obj === 'object' &&
      obj.nodeType === 1 &&
      typeof obj.nodeName === 'string'
    )
  }

  function clamp(n, min, max) {
    if (n < min) return min;
    if (n > max) return max;
    return n;
  }

  /**
   * (Internal) converts a percentage (`0..1`) to a bar translateX
   * percentage (`-100%..0%`).
   */

  function toBarPerc(n) {
    return (-1 + n) * 100;
  }


  /**
   * (Internal) returns the correct CSS for changing the bar's
   * position given an n percentage, and speed and ease from Settings
   */

  function barPositionCSS(n, speed, ease) {
    var barCSS;

    if (Settings.positionUsing === 'translate3d') {
      barCSS = { transform: 'translate3d('+toBarPerc(n)+'%,0,0)' };
    } else if (Settings.positionUsing === 'translate') {
      barCSS = { transform: 'translate('+toBarPerc(n)+'%,0)' };
    } else {
      barCSS = { 'margin-left': toBarPerc(n)+'%' };
    }

    barCSS.transition = 'all '+speed+'ms '+ease;

    return barCSS;
  }

  /**
   * (Internal) Queues a function to be executed.
   */

  var queue = (function() {
    var pending = [];

    function next() {
      var fn = pending.shift();
      if (fn) {
        fn(next);
      }
    }

    return function(fn) {
      pending.push(fn);
      if (pending.length == 1) next();
    };
  })();

  /**
   * (Internal) Applies css properties to an element, similar to the jQuery
   * css method.
   *
   * While this helper does assist with vendor prefixed property names, it
   * does not perform any manipulation of values prior to setting styles.
   */

  var css = (function() {
    var cssPrefixes = [ 'Webkit', 'O', 'Moz', 'ms' ],
        cssProps    = {};

    function camelCase(string) {
      return string.replace(/^-ms-/, 'ms-').replace(/-([\da-z])/gi, function(match, letter) {
        return letter.toUpperCase();
      });
    }

    function getVendorProp(name) {
      var style = document.body.style;
      if (name in style) return name;

      var i = cssPrefixes.length,
          capName = name.charAt(0).toUpperCase() + name.slice(1),
          vendorName;
      while (i--) {
        vendorName = cssPrefixes[i] + capName;
        if (vendorName in style) return vendorName;
      }

      return name;
    }

    function getStyleProp(name) {
      name = camelCase(name);
      return cssProps[name] || (cssProps[name] = getVendorProp(name));
    }

    function applyCss(element, prop, value) {
      prop = getStyleProp(prop);
      element.style[prop] = value;
    }

    return function(element, properties) {
      var args = arguments,
          prop,
          value;

      if (args.length == 2) {
        for (prop in properties) {
          value = properties[prop];
          if (value !== undefined && properties.hasOwnProperty(prop)) applyCss(element, prop, value);
        }
      } else {
        applyCss(element, args[1], args[2]);
      }
    }
  })();

  /**
   * (Internal) Determines if an element or space separated list of class names contains a class name.
   */

  function hasClass(element, name) {
    var list = typeof element == 'string' ? element : classList(element);
    return list.indexOf(' ' + name + ' ') >= 0;
  }

  /**
   * (Internal) Adds a class to an element.
   */

  function addClass(element, name) {
    var oldList = classList(element),
        newList = oldList + name;

    if (hasClass(oldList, name)) return;

    // Trim the opening space.
    element.className = newList.substring(1);
  }

  /**
   * (Internal) Removes a class from an element.
   */

  function removeClass(element, name) {
    var oldList = classList(element),
        newList;

    if (!hasClass(element, name)) return;

    // Replace the class name.
    newList = oldList.replace(' ' + name + ' ', ' ');

    // Trim the opening and closing spaces.
    element.className = newList.substring(1, newList.length - 1);
  }

  /**
   * (Internal) Gets a space separated list of the class names on the element.
   * The list is wrapped with a single space on each end to facilitate finding
   * matches within the list.
   */

  function classList(element) {
    return (' ' + (element && element.className || '') + ' ').replace(/\s+/gi, ' ');
  }

  /**
   * (Internal) Removes an element from the DOM.
   */

  function removeElement(element) {
    element && element.parentNode && element.parentNode.removeChild(element);
  }

  return NProgress;
});


================================================
FILE: package.json
================================================
{
  "name": "nprogress",
  "author": "Rico Sta. Cruz <hi@ricostacruz.com>",
  "description": "Simple slim progress bars",
  "version": "0.2.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/rstacruz/nprogress.git"
  },
  "scripts": {
    "test": "mocha"
  },
  "main": "nprogress.js",
  "license": "MIT",
  "devDependencies": {
    "chai": "~1.6.1",
    "jquery": "^3.5.0",
    "jsdom": "^5.4.3",
    "mocha": "^2.2.4",
    "mocha-jsdom": "^0.3.0"
  },
  "dependencies": {},
  "jspm": {
    "format": "global",
    "shim": {
      "nprogress": {
        "deps": [
          "./nprogress.css!"
        ]
      }
    },
    "dependencies": {
      "css": "*"
    }
  },
  "spm": {
    "main": "nprogress.js",
    "output": [
      "nprogress.css"
    ],
    "ignore": [
      "support",
      "test",
      "vendor"
    ]
  }
}


================================================
FILE: support/extras.css
================================================
/* Make the entire page show a busy cursor */
.nprogress-busy body {
  cursor: wait;
}


================================================
FILE: support/style.css
================================================
i, b {
  font-style: normal;
  font-weight: 400;
}

body, html {
  padding: 0;
  margin: 0;
}

body {
  background: white;
}

body, td, input, textarea {
  font-family: source sans pro, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #222;
}

button {
  cursor: pointer;
}

* {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.nprogress-logo {
  display: inline-block;

  width: 100px;
  height: 20px;
  border: solid 4px #2d9;
  border-radius: 10px;

  position: relative;
}
.nprogress-logo:after {
  content: '';
  display: block;

  position: absolute;
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 40%;

  background: #2d9;
  border-radius: 3px;
}

.fade {
  transition: all 300ms linear 700ms;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  opacity: 1;
}

.fade.out {
  opacity: 0;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.button {
  display: inline-block;
  text-decoration: none;

  background: #eee;
  color: #777;
  border-radius: 2px;

  padding: 8px 10px;
  font-weight: 700;
  text-align: left;
}

.button.play:before {
  content: '\25b6';
}

.button:hover {
  background: #2d9;
  color: #fff;
}

.button.primary {
  background: #2d9;
  color: #fff;
}
.button.primary:hover {
  background: #1c8;
}

.button:active {
  background: #2d9;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6);
}

.controls {
  text-align: left;
  margin: 0 auto;
  max-width: 300px;
  color: #666;
}

.controls .button {
  width: 40px;
  margin-right: 10px;
  text-align: center;
}

.controls i {
  color: #999;
}

.controls b {
  color: #29d;
  font-weight: 700;
}

.controls {
  font-size: 0.9em;
}

.page-header {
  text-align: center;
  max-width: 400px;
  padding: 3em 20px;
  margin: 0 auto;
}

.page-header h1 {
  font-size: 2.0em;
  text-align: center;
  font-weight: 200;
  line-height: 1.3;
  color: #333;
  margin: 0;
}

p.brief {
  line-height: 1.4;
  font-style: italic;
  color: #888;
}

p.brief.big {
  font-size: 1.1em;
}

@media (min-width: 480px) {
  .page-header h1 {
    margin-top: 1em;
    margin-bottom: 0.4em;
  }
}

.page-header h1 i {
  color: #aaa;
  font-style: normal;
  font-weight: 200;
}

@media (min-width: 480px) {
  .page-header h1 {
    font-size: 3em; }
  .page-header {
    padding: 4.5em 20px 3.5em 20px;
  }
}

/* --- */

.actions {
  text-align: center;
  margin: 2em 0;
}

@media (min-width: 480px) {
  .actions {
    margin: 4.5em 0 3.5em 0;
  }
}

.big.button {
  padding-left: 30px;
  padding-right: 30px;
  font-size: 1.1em;
}


/* ---- */

div.hr-rule {
  height: 1px;
  width: 100px;
  margin: 40px auto;
  background: #ddd;
}
.share-buttons {
  margin: 0 auto;
  text-align: center;
}


================================================
FILE: test/component.html
================================================
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name='viewport' content='width=device-width,initial-scale=1.0'>
  <title>Tests</title>
  <link rel='stylesheet' href='../vendor/mocha.css'>
  <link rel='stylesheet' href='../build/build.css'>
  <script src='../build/build.js'></script>

  <!-- mocha -->
  <script src='../vendor/mocha.js'></script>
  <script>mocha.ignoreLeaks(); mocha.setup('bdd');</script>
  <script src='../vendor/chai.js'></script>
  <script>should = chai.should()</script>
  <script>assert = chai.assert</script>
  <script>testSuite = describe;</script>

  <!-- tests -->
  <script src="test.js"></script>  
  <script>onload = function() { mocha.run(); }</script>
</head>
<body>
  <div id="mocha"></div>
</body>
</html>


================================================
FILE: test/index.html
================================================
<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Nprogress tests</title>
  <meta name='viewport' content='width=device-width,initial-scale=1.0'>
  <link href='https://cdn.rawgit.com/visionmedia/mocha/2.2.4/mocha.css' rel='stylesheet' />
</head>
<body>
  <div id='mocha'></div>
  <script src='https://cdn.rawgit.com/visionmedia/mocha/2.2.4/mocha.js'></script>
  <script src='https://cdn.rawgit.com/chaijs/chai/2.3.0/chai.js'></script>
  <script>window.onerror=function(msg,url,line){document.getElementById('mocha').innerHTML+='<h1>'+msg+'</'+'h1>'+'<h2>'+url+':'+line+'</'+'h2>';return false}</script>
  <script>mocha.ignoreLeaks(); mocha.setup('bdd');</script>

  <!-- nprogress -->
  <script src='https://code.jquery.com/jquery-1.11.2.min.js'></script>
  <script src='../nprogress.js'></script>

  <!-- tests -->
  <script src='test.js'></script>  
  <script>mocha.run()</script>
</body>
</html>


================================================
FILE: test/test.js
================================================
(function() {
  if (typeof process === 'object') {
    require('mocha-jsdom')();
  }

  var root = this;
  var assert = (root.chai || require('chai')).assert;

  describe('NProgress', function() {
    var $, NProgress;

    beforeEach(function() {
      $ = root.jQuery || require('jquery');
      NProgress = root.NProgress || require('../nprogress');

      this.settings = $.extend({}, NProgress.settings);
    });

    afterEach(function() {
      $("#nprogress").remove();
      $('html').attr('class', '');
      NProgress.status = null;

      // Restore settings
      $.extend(NProgress.settings, this.settings);
    });

    describe('.set()', function() {
      it('.set(0) must render', function(done) {
        NProgress.set(0);
        assert.equal($("#nprogress").length, 1);
        assert.equal($("#nprogress .bar").length, 1);
        assert.equal($("#nprogress .peg").length, 1);
        assert.equal($("#nprogress .spinner").length, 1);
        done();
      });

      it('.set(1) should appear and disappear', function(done) {
        NProgress.configure({ speed: 10 });
        NProgress.set(0).set(1);
        assert.equal($("#nprogress").length, 1);

        setTimeout(function() {
          assert.equal($("#nprogress").length, 0);
          done();
        }, 70);
      });

      it('must respect minimum', function() {
        NProgress.set(0);
        assert.equal(NProgress.status, NProgress.settings.minimum);
      });

      it('must clamp to minimum', function() {
        NProgress.set(-100);
        assert.equal(NProgress.status, NProgress.settings.minimum);
      });

      it('must clamp to maximum', function() {
        NProgress.set(456);
        assert.equal(NProgress.status, null);
      });
    });

    // ----

    describe('.start()', function() {
      it('must render', function(done) {
        NProgress.start();
        assert.equal($("#nprogress").length, 1);
        done();
      });

      it('must respect minimum', function() {
        NProgress.start();
        assert.equal(NProgress.status, NProgress.settings.minimum);
      });

      it('must be attached to specified parent', function() {
        var test = $('<div>', {id: 'test'}).appendTo('body');
        NProgress.configure({parent: '#test'});
        NProgress.start();
        assert.isTrue($("#nprogress").parent().is(test));
        assert.isTrue($(NProgress.settings.parent).hasClass("nprogress-custom-parent"));
      });
    });

    // ----

    describe('.done()', function() {
      it('must not render without start', function(done) {
        NProgress.done();
        assert.equal($("#nprogress").length, 0);
        done();
      });

      it('.done(true) must render', function(done) {
        NProgress.done(true);
        assert.equal($("#nprogress").length, 1);
        done();
      });
    });

    // ----

    describe('.remove()', function() {
      it('should be removed from the parent', function() {
        NProgress.set(1);
        NProgress.remove();

        var parent = $(NProgress.settings.parent);
        assert.isFalse(parent.hasClass('nprogress-custom-parent'));
        assert.equal(parent.find('#nprogress').length, 0);
      });
    });

    // ----

    describe('.inc()', function() {
      it('should render', function() {
        NProgress.inc();
        assert.equal($("#nprogress").length, 1);
      });

      it('should start with minimum', function() {
        NProgress.inc();
        assert.equal(NProgress.status, NProgress.settings.minimum);
      });

      it('should increment', function() {
        NProgress.start();
        var start = NProgress.status;

        NProgress.inc();
        assert.operator(NProgress.status, '>', start);
      });

      it('should never reach 1.0', function() {
        for (var i=0; i<100; ++i) { NProgress.inc(); }
        assert.operator(NProgress.status, '<', 1.0);
      });
    });

    // -----

    describe('.configure()', function() {
      it('should work', function() {
        NProgress.configure({ minimum: 0.5 });
        assert.equal(NProgress.settings.minimum, 0.5);
      });
    });

    // ----

    describe('.configure(showSpinner)', function() {
      it('should render spinner by default', function() {
        NProgress.start();

        assert.equal($("#nprogress .spinner").length, 1);
      });

      it('should be true by default', function() {
        assert.equal(NProgress.settings.showSpinner, true);
      });

      it('should hide (on false)', function() {
        NProgress.configure({ showSpinner: false });
        NProgress.start();

        assert.equal($("#nprogress .spinner").length, 0);
      });
    });
  });

})();