Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add nprogress bar

  • Loading branch information...
commit 1a2296bdfdf8a91fca1e28426a6ce876aaf25d4b 1 parent 05e3e9f
@cubehouse cubehouse authored
Showing with 322 additions and 6 deletions.
  1. +1 −1  Makefile
  2. +85 −0 css/nprogress.css
  3. +15 −5 js/api.js
  4. +221 −0 js/nprogress.js
View
2  Makefile
@@ -61,7 +61,7 @@ buildcss:
(cd css/tmp/ && echo ".az4db {" > style.css && lessc bootstrap.less >> style.css && echo "}" >> style.css)
(cd css/tmp/ && ../../node_modules/less/bin/lessc style.css > ../style.css)
(cd css/ && sed -i 's|.az4db body|.az4db|g' style.css)
- (cd css/ && cat force_scrollbars.css style.css > tmp.css && mv tmp.css style.css)
+ (cd css/ && cat force_scrollbars.css nprogress.css style.css > tmp.css && mv tmp.css style.css)
rm -rf css/tmp/
(cd css/ && sed -i 's|/\*.*\*/||g' style.css)
rm -rf css/img
View
85 css/nprogress.css
@@ -0,0 +1,85 @@
+/* Make clicks pass-through */
+#nprogress {
+ pointer-events: none;
+ -webkit-pointer-events: none;
+}
+
+/* Make the entire page show a busy cursor */
+.nprogress-busy body {
+ cursor: wait;
+}
+
+#nprogress .bar {
+ background: #29d;
+
+ position: fixed;
+ z-index: 100;
+ top: 0;
+ left: 0;
+
+ width: 100%;
+ height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+ display: block;
+ position: absolute;
+ right: 0px;
+ width: 100px;
+ height: 100%;
+ box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+ opacity: 1.0;
+
+ -webkit-transform: rotate(3deg) translate(0px, -4px);
+ -moz-transform: rotate(3deg) translate(0px, -4px);
+ -ms-transform: rotate(3deg) translate(0px, -4px);
+ -o-transform: rotate(3deg) translate(0px, -4px);
+ transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+ display: block;
+ position: fixed;
+ z-index: 100;
+ top: 15px;
+ right: 15px;
+}
+
+#nprogress .spinner-icon {
+ width: 14px;
+ height: 14px;
+
+ border: solid 2px transparent;
+ border-top-color: #29d;
+ border-left-color: #29d;
+ border-radius: 10px;
+
+ -webkit-animation: nprogress-spinner 400ms linear infinite;
+ -moz-animation: nprogress-spinner 400ms linear infinite;
+ -ms-animation: nprogress-spinner 400ms linear infinite;
+ -o-animation: nprogress-spinner 400ms linear infinite;
+ animation: nprogress-spinner 400ms linear infinite;
+}
+
+@-webkit-keyframes nprogress-spinner {
+ 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-moz-keyframes nprogress-spinner {
+ 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-o-keyframes nprogress-spinner {
+ 0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-ms-keyframes nprogress-spinner {
+ 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+ 0% { transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); transform: rotate(360deg); }
+}
View
20 js/api.js
@@ -1,4 +1,4 @@
-define(["config", "encode", "XDM"], function(_config, encoder, XDM) {
+define(["config", "encode", "XDM", "nprogress"], function(_config, encoder, XDM, nprogress) {
var $t = {};
$t.module = "api";
@@ -6,6 +6,16 @@ define(["config", "encode", "XDM"], function(_config, encoder, XDM) {
'<div class="loader progress progress-info progress-striped active">'+
'<div class="bar" style="width:100%"></div></div></div>')
.hide().appendTo($("body"));
+
+ function startLoad() {
+ loader.show();
+ NProgress.start();
+ }
+
+ function hideLoad() {
+ loader.hide();
+ NProgress.done();
+ }
// API wrapper for making API requests
$t.call = function(method, args, cb) {
@@ -17,13 +27,13 @@ define(["config", "encode", "XDM"], function(_config, encoder, XDM) {
// data callback variable, basically just passes to handle but with cb too
var dd = function(data) {
- loader.hide();
+ hideLoad();
handle(data, cb);
};
// show loader
- loader.show();
+ startLoad();
// basic AJAX request
$.ajax({
@@ -44,10 +54,10 @@ define(["config", "encode", "XDM"], function(_config, encoder, XDM) {
$t.post = function(method, args, cb) {
// show loading bar
- loader.show();
+ startLoad();
XDM(method, args, function(data) {
- loader.hide();
+ hideLoad();
cb(data);
});
View
221 js/nprogress.js
@@ -0,0 +1,221 @@
+/*! NProgress (c) 2013, Rico Sta. Cruz
+ * http://ricostacruz.com/nprogress */
+
+;(function(factory) {
+
+ if (typeof module === 'object') {
+ module.exports = factory(this.jQuery || require('dom'));
+ } else {
+ this.NProgress = factory(this.jQuery);
+ }
+
+})(function($) {
+ var NProgress = {};
+
+ NProgress.version = '0.1.0';
+
+ var Settings = NProgress.settings = {
+ minimum: 0.08,
+ easing: 'ease',
+ speed: 200,
+ trickle: true,
+ trickleRate: 0.02,
+ trickleSpeed: 800,
+ template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner"><div class="spinner-icon"></div></div>'
+ };
+
+ /**
+ * Updates configuration.
+ *
+ * NProgress.configure({
+ * minimum: 0.1
+ * });
+ */
+ NProgress.configure = function(options) {
+ $.extend(Settings, options);
+ return this;
+ };
+
+ /**
+ * Last number.
+ */
+
+ NProgress.status = null;
+
+ /**
+ * Sets the progress bar status, where `n` is a number from `0.0` to `1.0`.
+ *
+ * NProgress.set(0.4);
+ * NProgress.set(1.0);
+ */
+
+ NProgress.set = function(n) {
+ var started = NProgress.isStarted();
+
+ n = clamp(n, Settings.minimum, 1);
+ NProgress.status = (n === 1 ? null : n);
+
+ var $progress = NProgress.render(!started),
+ $bar = $progress.find('[role="bar"]'),
+ speed = Settings.speed,
+ ease = Settings.easing;
+
+ $progress[0].offsetWidth; /* Repaint */
+
+ $progress.queue(function(next) {
+ $bar.css({
+ transition: 'all '+speed+'ms '+ease,
+ transform: 'translate3d('+toBarPerc(n)+'%,0,0)'
+ });
+
+ if (n === 1) {
+ // Fade out
+ $progress.css({ transition: 'none', opacity: 1 });
+ $progress[0].offsetWidth; /* Repaint */
+
+ setTimeout(function() {
+ $progress.css({ transition: 'all '+speed+'ms linear', opacity: 0 });
+ setTimeout(function() {
+ NProgress.remove();
+ next();
+ }, speed);
+ }, speed);
+ } else {
+ setTimeout(next, speed);
+ }
+ });
+
+ 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.
+ *
+ * NProgress.start();
+ *
+ */
+ NProgress.start = function() {
+ if (!NProgress.status) NProgress.set(0);
+
+ var work = function() {
+ setTimeout(function() {
+ if (!NProgress.status) return;
+ NProgress.trickle();
+ work();
+ }, Settings.trickleSpeed);
+ };
+
+ if (Settings.trickle) work();
+
+ return this;
+ };
+
+ /**
+ * Hides the progress bar.
+ * This is the *sort of* the same as setting the status to 100%, with the
+ * difference being `done()` makes some placebo effect of some realistic motion.
+ *
+ * NProgress.done();
+ *
+ * If `true` is passed, it will show the progress bar even if its hidden.
+ *
+ * NProgress.done(true);
+ */
+
+ NProgress.done = function(force) {
+ if (!force && !NProgress.status) return this;
+
+ return NProgress.inc(0.3 + 0.5 * Math.random()).set(1);
+ };
+
+ /**
+ * Increments by a random amount.
+ */
+
+ NProgress.inc = function(amount) {
+ var n = NProgress.status;
+
+ if (!n) {
+ return NProgress.start();
+ } else {
+ if (typeof amount !== 'number') {
+ amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95);
+ }
+
+ n = clamp(n + amount, 0, 0.994);
+ return NProgress.set(n);
+ }
+ };
+
+ NProgress.trickle = function() {
+ return NProgress.inc(Math.random() * Settings.trickleRate);
+ };
+
+ /**
+ * (Internal) renders the progress bar markup based on the `template`
+ * setting.
+ */
+
+ 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('+perc+'%,0,0)'
+ });
+
+ $el.appendTo(document.body);
+
+ return $el;
+ };
+
+ /**
+ * (Internal) Removes the element. Opposite of render().
+ */
+
+ NProgress.remove = function() {
+ $('html').removeClass('nprogress-busy');
+ $('#nprogress').remove();
+ };
+
+ /**
+ * Checks if the progress bar is rendered.
+ */
+
+ NProgress.isRendered = function() {
+ return ($("#nprogress").length > 0);
+ };
+
+ /**
+ * Helpers
+ */
+
+ function clamp(n, min, max) {
+ if (n < min) return min;
+ if (n > max) return max;
+ return n;
+ }
+
+ /**
+ * (Internal) converts a percentage (`0..1`) to a bar translateX
+ * percentage (`-100%..0%`).
+ */
+
+ function toBarPerc(n) {
+ return (-1 + n) * 100;
+ }
+
+ return NProgress;
+});
+
Please sign in to comment.
Something went wrong with that request. Please try again.