Merge pull request #136 from ChrisCinelli/master

Smoother decelerating auto increments

Author: rstacruz

nprogress.js

@@ -18,12 +18,11 @@
 
   var Settings = NProgress.settings = {
     minimum: 0.08,
-    easing: 'ease',
+    easing: 'linear',
     positionUsing: '',
-    speed: 200,
+    speed: 350,
     trickle: true,
-    trickleRate: 0.02,
-    trickleSpeed: 800,
+    trickleSpeed: 250,
     showSpinner: true,
     barSelector: '[role="bar"]',
     spinnerSelector: '[role="spinner"]',
@@ -83,16 +82,16 @@
 
       if (n === 1) {
         // Fade out
-        css(progress, { 
-          transition: 'none', 
-          opacity: 1 
+        css(progress, {
+          transition: 'none',
+          opacity: 1
         });
         progress.offsetWidth; /* Repaint */
 
         setTimeout(function() {
-          css(progress, { 
-            transition: 'all ' + speed + 'ms linear', 
-            opacity: 0 
+          css(progress, {
+            transition: 'all ' + speed + 'ms linear',
+            opacity: 0
           });
           setTimeout(function() {
             NProgress.remove();
@@ -161,9 +160,26 @@
 
     if (!n) {
       return NProgress.start();
+    } else if(n > 1) {
+      return;
     } else {
       if (typeof amount !== 'number') {
-        amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95);
+        if (n >= 0 && n < 0.25) {
+          // Start out between 3 - 6% increments
+          amount = (Math.random() * (5 - 3 + 1) + 3) / 100;
+        } else if (n >= 0.25 && n < 0.65) {
+          // increment between 0 - 3%
+          amount = (Math.random() * 3) / 100;
+        } else if (n >= 0.65 && n < 0.9) {
+          // increment between 0 - 2%
+          amount = (Math.random() * 2) / 100;
+        } else if (n >= 0.9 && n < 0.99) {
+          // finally, increment it .5 %
+          amount = 0.005;
+        } else {
+          // after 99%, don't increment:
+          amount = 0;
+        }
       }
 
       n = clamp(n + amount, 0, 0.994);
@@ -172,7 +188,7 @@
   };
 
   NProgress.trickle = function() {
-    return NProgress.inc(Math.random() * Settings.trickleRate);
+    return NProgress.inc();
   };
 
   /**
@@ -220,7 +236,7 @@
     if (NProgress.isRendered()) return document.getElementById('nprogress');
 
     addClass(document.documentElement, 'nprogress-busy');
-    
+
     var progress = document.createElement('div');
     progress.id = 'nprogress';
     progress.innerHTML = Settings.template;
@@ -229,7 +245,7 @@
         perc     = fromStart ? '-100' : toBarPerc(NProgress.status || 0),
         parent   = document.querySelector(Settings.parent),
         spinner;
-    
+
     css(bar, {
       transition: 'all 0 linear',
       transform: 'translate3d(' + perc + '%,0,0)'
@@ -340,7 +356,7 @@
 
   var queue = (function() {
     var pending = [];
-    
+
     function next() {
       var fn = pending.shift();
       if (fn) {
@@ -355,10 +371,10 @@
   })();
 
   /**
-   * (Internal) Applies css properties to an element, similar to the jQuery 
+   * (Internal) Applies css properties to an element, similar to the jQuery
    * css method.
    *
-   * While this helper does assist with vendor prefixed property names, it 
+   * While this helper does assist with vendor prefixed property names, it
    * does not perform any manipulation of values prior to setting styles.
    */
 
@@ -399,7 +415,7 @@
 
     return function(element, properties) {
       var args = arguments,
-          prop, 
+          prop,
           value;
 
       if (args.length == 2) {
@@ -430,7 +446,7 @@
     var oldList = classList(element),
         newList = oldList + name;
 
-    if (hasClass(oldList, name)) return; 
+    if (hasClass(oldList, name)) return;
 
     // Trim the opening space.
     element.className = newList.substring(1);
@@ -454,13 +470,13 @@
   }
 
   /**
-   * (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 
+   * (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.className || '') + ' ').replace(/\s+/gi, ' ');
+    return (' ' + (element && element.className || '') + ' ').replace(/\s+/gi, ' ');
   }
 
   /**
@@ -473,4 +489,3 @@
 
   return NProgress;
 });
-