diff --git a/client/css/nprogress.styl b/client/css/nprogress.styl new file mode 100644 index 00000000..97e57b94 --- /dev/null +++ b/client/css/nprogress.styl @@ -0,0 +1,41 @@ +@import colors + +#nprogress + pointer-events: none + + .bar + background: $main-color + position: fixed + z-index: 1031 + top: 0 + left: 0 + width: 100% + height: 2px + + .spinner-icon + width: 18px + height: 18px + box-sizing: border-box + border: solid 2px transparent + border-top-color: $main-color + border-left-color: $main-color + border-radius: 50% + animation: nprogress-spinner 400ms linear infinite + + .peg + display: block + position: absolute + right: 0px + width: 100px + height: 100% + box-shadow: 0 0 10px $main-color, 0 0 5px $main-color + opacity: 1.0 + transform: rotate(3deg) translate(0px, -4px) + +.nprogress-custom-parent + overflow: hidden + position: relative + + #nprogress .spinner, + #nprogress .bar + position: absolute diff --git a/client/js/api.js b/client/js/api.js index 515e2b4a..b23daa59 100644 --- a/client/js/api.js +++ b/client/js/api.js @@ -1,5 +1,6 @@ 'use strict'; +const nprogress = require('nprogress'); const cookies = require('js-cookie'); const request = require('superagent'); const config = require('./config.js'); @@ -52,6 +53,7 @@ class Api { _process(url, requestFactory, data, files) { const fullUrl = this.getFullUrl(url); return new Promise((resolve, reject) => { + nprogress.start(); let req = requestFactory(fullUrl); if (data) { req.attach('metadata', new Blob([JSON.stringify(data)])); @@ -66,6 +68,7 @@ class Api { } req.set('Accept', 'application/json') .end((error, response) => { + nprogress.done(); if (error) { reject(response && response.body ? response.body : { 'title': 'Networking error', diff --git a/client/package.json b/client/package.json index e444f441..76a14ad8 100644 --- a/client/package.json +++ b/client/package.json @@ -20,6 +20,7 @@ "js-yaml": "^3.5.5", "merge": "^1.2.0", "mousetrap": "^1.5.3", + "nprogress": "^0.2.0", "page": "^1.7.1", "stylus": "^0.54.2", "superagent": "^1.8.3",