Improve appearance of spinner.

rstacruz · rstacruz · commit 5321ab5c3343 · 2013-08-20T19:55:45.000+08:00
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <header class='page-header'>
-    <h1>NProgress</h1>
+    <h1>NProgress<i>.js</i></h1>
   </header>
 
   <div class='controls'>
diff --git a/nprogress.css b/nprogress.css
@@ -38,14 +38,16 @@
   width: 14px;
   height: 14px;
 
-  border-top:  solid 3px #29d;
-  border-radius: 8px;
+  border:  solid 2px transparent;
+  border-top-color:  #29d;
+  border-left-color: #29d;
+  border-radius: 10px;
 
-  -webkit-animation: nprogress-spinner 300ms linear infinite;
-  -moz-animation: nprogress-spinner 300ms linear infinite;
-  -ms-animation: nprogress-spinner 300ms linear infinite;
-  -o-animation: nprogress-spinner 300ms linear infinite;
-  animation: nprogress-spinner 300ms linear infinite;
+  -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 {
diff --git a/support/style.css b/support/style.css
@@ -68,6 +68,11 @@ button {
   margin: 1em 0 1em 0;
 }
 
+.page-header h1 i {
+  color: #aaa;
+  font-style: normal;
+}
+
 @media (min-width: 480px) {
   .page-header h1 {
     font-size: 3em;
