diff --git a/nprogress.css b/nprogress.css
index 6a98088..08ffc60 100644
--- a/nprogress.css
+++ b/nprogress.css
@@ -6,7 +6,7 @@
#nprogress .bar {
background: #29d;
- position: fixed;
+ position: absolute;
z-index: 100;
top: 0;
left: 0;
@@ -33,7 +33,7 @@
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
- position: fixed;
+ position: absolute;
z-index: 100;
top: 15px;
right: 15px;
@@ -53,6 +53,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 86e57ff..863f372 100644
--- a/nprogress.js
+++ b/nprogress.js
@@ -27,6 +27,7 @@
trickleRate: 0.02,
trickleSpeed: 800,
showSpinner: true,
+ parent: 'body',
template: '
'
};
@@ -185,7 +186,9 @@
if (!Settings.showSpinner)
$el.find('[role="spinner"]').remove();
- $el.appendTo(document.body);
+ $(Settings.parent)
+ .addClass('nprogress-parent')
+ .append($el);
return $el;
};
@@ -195,6 +198,7 @@
*/
NProgress.remove = function() {
+ $(Settings.parent).removeClass('nprogress-parent');
$('html').removeClass('nprogress-busy');
$('#nprogress').remove();
};
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();