Make it friendlier to Turbolinks by removing the flicker on render().

nprogress.js

@@ -44,22 +44,22 @@
    */
 
   NProgress.set = function(n) {
+    var started = NProgress.isStarted();
+
     n = clamp(n, Settings.minimum, 1);
     NProgress.status = (n === 1 ? null : n);
 
-    var $progress = NProgress.render(),
+    var $progress = NProgress.render(!started),
         $bar      = $progress.find('[role~="bar"]'),
         speed     = Settings.speed,
         ease      = Settings.easing;
 
     $progress[0].offsetWidth; /* Repaint */
 
     $progress.queue(function(next) {
-      var perc = -1 + n; /* -1.0 ... 0.0 */
-
       $bar.css({
         transition: 'all '+speed+'ms '+ease,
-        transform: 'translate3d('+(perc*100)+'%,0,0)'
+        transform: 'translate3d('+toBarPerc(n)+'%,0,0)'
       });
 
       if (n === 1) {
@@ -82,6 +82,10 @@
     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.
@@ -151,16 +155,18 @@
    * setting.
    */
 
-  NProgress.render = function() {
+  NProgress.render = function(fromStart) {
     if (NProgress.isRendered()) return $("#nprogress");
     $('html').addClass('nprogress-busy');
 
     var $el = $("<div id='nprogress'>")
       .html(Settings.template);
 
+    var perc = fromStart ? '-100' : toBarPerc(NProgress.status || 0);
+
     $el.find('[role~="bar"]').css({
       transition: 'all 0 linear',
-      transform: 'translate3d(-100%,0,0)'
+      transform: 'translate3d('+perc+'%,0,0)'
     });
 
     $el.appendTo(document.body);
@@ -195,6 +201,15 @@
     return n;
   }
 
+  /**
+   * (Internal) converts a percentage (`0..1`) to a bar translateX
+   * percentage (`-100%..0%`).
+   */
+
+  function toBarPerc(n) {
+    return (-1 + n) * 100;
+  }
+
   return NProgress;
 }(jQuery));