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 ``` 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: "
...
" }); ~~~ #### `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.
[![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*.
[![StackOverflow](http://img.shields.io/badge/stackoverflow-nprogress-brightgreen.svg)]( http://stackoverflow.com/questions/tagged/nprogress ) __Chat__: join us at gitter.im.
[![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].
Authored and maintained by Rico Sta. Cruz with help from [contributors]. > [ricostacruz.com](http://ricostacruz.com)  ·  > GitHub [@rstacruz](https://github.com/rstacruz)  ·  > 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)   [![](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 ================================================ NProgress: slim progress bars in JavaScript

NProgress.js

A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!

NProgress.start() — shows the progress bar

NProgress.set(0.4) — sets a percentage

NProgress.inc() — increments by a little

NProgress.done() — completes the progress

Download v

Perfect for Turbolinks, Pjax, and other Ajax-heavy apps.

HN
================================================ 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: '
' }; /** * 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 ", "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 ================================================ Tests
================================================ FILE: test/index.html ================================================ Nprogress tests
================================================ 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 = $('
', {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); }); }); }); })();