more sensible defaults for the loading bar

Author: chieffancypants

example/app.css

@@ -2,14 +2,15 @@ body {
   background-color: #ecf0f1;
   /*padding: 25px;*/
   font-family: 'Oxygen', sans;
-  width: 850px;
+  width: 85%;
   margin: auto;
   overflow-y: scroll;
 }
 .thumbnail {
   width: 70px;
   height: 70px;
-  border: 1px solid #F1C6C2;
+  /*border: 1px solid #F1C6C2;*/
+  border: 1px solid #CE8982
 }
 a {
   font-size:16px;
@@ -154,3 +155,19 @@ h4 {
   font-family: 'Oxygen', sans;
   color: #888;
 }
+
+
+/*
+ * override the default CSS as an example
+ */
+
+#loading-bar .bar {
+  background: #2c3e50;
+}
+#loading-bar .peg {
+  box-shadow: 0 0 10px #2c3e50, 0 0 5px #2c3e50;
+}
+#loading-bar-spinner .spinner-icon {
+  border-top-color:  #2c3e50;
+  border-left-color: #2c3e50;
+}

src/loading-bar.css

@@ -30,7 +30,7 @@
   -o-transition: width 500ms;
   transition: width 500ms;
 
-  background: #2c3e50;
+  background: #29d;
   position: fixed;
   z-index: 2000;
   top: 0;
@@ -46,7 +46,7 @@
   right: 0px;
   width: 100px;
   height: 100%;
-  box-shadow: 0 0 10px #2c3e50, 0 0 5px #2c3e50;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
   opacity: 1.0;
 
   -webkit-transform: rotate(3deg) translate(0px, -4px);
@@ -69,8 +69,8 @@
   height: 14px;
 
   border:  solid 2px transparent;
-  border-top-color:  #2c3e50;
-  border-left-color: #2c3e50;
+  border-top-color:  #29d;
+  border-left-color: #29d;
   border-radius: 10px;
 
   -webkit-animation: loading-bar-spinner 400ms linear infinite;