Add support for specifying parent container

nprogress.css

@@ -5,9 +5,8 @@
 
 #nprogress .bar {
   background: #29d;
-
-  position: fixed;
   z-index: 1031;
+  position: absolute;
   top: 0;
   left: 0;
 
@@ -33,8 +32,8 @@
 /* Remove these to get rid of the spinner */
 #nprogress .spinner {
   display: block;
-  position: fixed;
   z-index: 1031;
+  position: absolute;
   top: 15px;
   right: 15px;
 }
@@ -53,6 +52,16 @@
           animation: nprogress-spinner 400ms linear infinite;
 }
 
+.nprogress-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+body.nprogress-parent #nprogress .bar,
+body.nprogress-parent #nprogress .spinner {
+  position: fixed;
+}
+
 @-webkit-keyframes nprogress-spinner {
   0%   { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(360deg); }

nprogress.js

@@ -27,6 +27,7 @@
     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>'
   };
 
@@ -82,16 +83,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();
@@ -177,24 +178,24 @@
   /**
    * 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) {
@@ -204,10 +205,10 @@
             NProgress.set((initial - current) / initial);
         }
       });
-      
+
       return this;
     };
-    
+
   })();
 
   /**
@@ -219,15 +220,15 @@
     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),
         spinner;
-    
+
     css(bar, {
       transition: 'all 0 linear',
       transform: 'translate3d(' + perc + '%,0,0)'
@@ -238,7 +239,10 @@
       spinner && removeElement(spinner);
     }
 
-    document.body.appendChild(progress);
+    var parent = findElement(Settings.parent);
+    addClass(parent, 'nprogress-parent');
+    parent.appendChild(progress);
+
     return progress;
   };
 
@@ -247,7 +251,8 @@
    */
 
   NProgress.remove = function() {
-    removeClass(document.documentElement, 'nprogress-busy');
+    var parent = findElement(Settings.parent);
+    removeClass(parent, 'nprogress-busy');
     var progress = document.getElementById('nprogress');
     progress && removeElement(progress);
   };
@@ -333,7 +338,7 @@
 
   var queue = (function() {
     var pending = [];
-    
+
     function next() {
       var fn = pending.shift();
       if (fn) {
@@ -348,10 +353,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.
    */
 
@@ -392,7 +397,7 @@
 
     return function(element, properties) {
       var args = arguments,
-          prop, 
+          prop,
           value;
 
       if (args.length == 2) {
@@ -423,7 +428,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);
@@ -447,8 +452,8 @@
   }
 
   /**
-   * (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.
    */
 
@@ -464,6 +469,18 @@
     element && element.parentNode && element.parentNode.removeChild(element);
   }
 
+  /**
+   * (Internal) Find the parent, which can either be a tag name or id.
+   */
+
+  function findElement(selector) {
+    var tags = document.getElementsByTagName(selector);
+    if (tags.length > 0) {
+      return tags[0];
+    }
+
+    return document.getElementById(selector);
+  }
+
   return NProgress;
 });
-

support/style.css

@@ -3,6 +3,11 @@ i, b {
   font-weight: 400;
 }
 
+body, html {
+  padding: 0;
+  margin: 0;
+}
+
 body {
   background: white;
 }
@@ -130,11 +135,10 @@ button {
 }
 
 .page-header {
-  margin: 1.5em auto;
   text-align: center;
   max-width: 400px;
-  padding: 0 20px;
-  margin: 3em auto;
+  padding: 3em 20px;
+  margin: 0 auto;
 }
 
 .page-header h1 {
@@ -173,7 +177,7 @@ p.brief.big {
   .page-header h1 {
     font-size: 3em; }
   .page-header {
-    margin: 4.5em auto 3.5em auto;
+    padding: 4.5em 20px 3.5em 20px;
   }
 }
 

test/test.js

@@ -71,6 +71,14 @@
         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-parent"));
+      });
     });
 
     // ----
@@ -91,6 +99,19 @@
 
     // ----
 
+    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-parent'));
+        assert.equal(parent.find('#nprogress').length, 0);
+      });
+    })
+
+    // ----
+
     describe('.inc()', function() {
       it('should render', function() {
         NProgress.inc();