Add support for specifying bar color and spinner color

Readme.md

@@ -177,11 +177,25 @@ specify this to change the parent container. (default: `body`)
 NProgress.configure({ parent: '#container' });
 ~~~
 
+#### `barColor`
+Specify this to change the bar color. (default: `#29d`)
+
+~~~ js
+NProgress.configure({ barColor: '#343A40' });
+~~~
+
+#### `spinnerColor`
+Specify this to change the spinner color. (default: `#29d`)
+
+~~~ js
+NProgress.configure({ spinnerColor: '#343A40' });
+~~~
+
+
 Customization
 -------------
 
-Just edit `nprogress.css` to your liking. Tip: you probably only want to find
-and replace occurrences of `#29d`.
+Just edit `nprogress.css` to your liking.
 
 The included CSS file is pretty minimal... in fact, feel free to scrap it and
 make your own!

nprogress.js

@@ -23,9 +23,11 @@
     speed: 200,
     trickle: true,
     trickleSpeed: 200,
+    barColor: '#29d',
     showSpinner: true,
     barSelector: '[role="bar"]',
     spinnerSelector: '[role="spinner"]',
+    spinnerColor: '#29d',
     parent: 'body',
     template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
   };
@@ -237,16 +239,31 @@
         parent = isDOM(Settings.parent)
           ? Settings.parent
           : document.querySelector(Settings.parent),
-        spinner
+        spinner,
+        spinnerIconSelector
 
     css(bar, {
       transition: 'all 0 linear',
-      transform: 'translate3d(' + perc + '%,0,0)'
+      transform: 'translate3d(' + perc + '%,0,0)',
+      backgroundColor: Settings.barColor, // set bar color
+    });
+
+    // set fancy blur effect color
+    css(progress.querySelector('.peg'), {
+      boxShadow: `0 0 10px ${Settings.barColor}, 0 0 5px ${Settings.barColor}`
     });
 
     if (!Settings.showSpinner) {
       spinner = progress.querySelector(Settings.spinnerSelector);
       spinner && removeElement(spinner);
+    } else {
+      // set spinner color
+      spinner = progress.querySelector(Settings.spinnerSelector);
+      spinnerIconSelector = spinner.querySelector('.spinner-icon');
+      css(spinnerIconSelector, {
+        borderTopColor: Settings.spinnerColor,
+        borderLeftColor: Settings.spinnerColor
+      })
     }
 
     if (parent != document.body) {