diff --git a/nprogress.css b/nprogress.css
index 21c5fbb..bea4aef 100644
--- a/nprogress.css
+++ b/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); }
diff --git a/nprogress.js b/nprogress.js
index b93800a..c698ca1 100644
--- a/nprogress.js
+++ b/nprogress.js
@@ -27,6 +27,7 @@
showSpinner: true,
barSelector: '[role="bar"]',
spinnerSelector: '[role="spinner"]',
+ parent: 'body',
template: '
'
};
@@ -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,7 +220,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;
@@ -227,7 +228,7 @@
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;
});
-
diff --git a/support/style.css b/support/style.css
index 3c15363..1a78acf 100644
--- a/support/style.css
+++ b/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;
}
}
diff --git a/test/test.js b/test/test.js
index cd8f9dd..521d989 100644
--- a/test/test.js
+++ b/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 = $('', {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();