Update docs.

rstacruz · rstacruz · commit 5345f9625272 · 2013-08-20T20:50:56.000+08:00
diff --git a/index.html b/index.html
@@ -9,9 +9,10 @@
 <body>
   <header class='page-header'>
     <h1>NProgress<i>.js</i></h1>
+    <p>Small, nano-scopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!</p>
   </header>
 
-  <div class='controls'>
+  <div class='controls fade out'>
     <p>
       <button class='button play' id='b-0'></button>
       <i>NProgress</i><b>.start()</b>
@@ -43,7 +44,7 @@ <h1>NProgress<i>.js</i></h1>
 
   <script>
     NProgress.start();
-    setTimeout(function() { NProgress.done(); }, 1000);
+    setTimeout(function() { NProgress.done(); $('.controls').removeClass('out'); }, 1000);
 
     $("#b-0").click(function() { NProgress.start(); });
     $("#b-40").click(function() { NProgress.set(0.4); });
diff --git a/nprogress.js b/nprogress.js
@@ -9,6 +9,7 @@
     minimum: 0.05,
     easing: 'ease',
     speed: 300,
+    trickleSpeed: 0.008,
     template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner"><div class="spinner-icon"></div></div>'
   };
 
@@ -81,11 +82,6 @@
    *     NProgress.start();
    *
    */
-  NProgress.start = function() {
-    if (!NProgress.status) NProgress.set(0);
-    return this;
-  };
-
   NProgress.start = function() {
     if (!NProgress.status) NProgress.set(0);
 
@@ -97,7 +93,7 @@
       }, Settings.speed * 4);
     };
 
-    work();
+    if (Settings.trickleSpeed) work();
 
     return this;
   };
@@ -140,7 +136,7 @@
   };
 
   NProgress.trickle = function() {
-    return NProgress.inc(Math.random() * 0.002);
+    return NProgress.inc(Math.random() * Settings.trickleSpeed);
   };
 
   /**
diff --git a/support/style.css b/support/style.css
@@ -15,6 +15,15 @@ body, td, input, textarea {
   -webkit-font-smoothing: antialiased;
 }
 
+.fade {
+  transition: all 300ms linear 700ms;
+  opacity: 1;
+}
+
+.fade.out {
+  opacity: 0;
+}
+
 button {
   margin: 0;
   padding: 0;
@@ -74,13 +83,27 @@ button {
   font-size: 0.9em;
 }
 
+.page-header {
+  margin: 1.5em auto;
+  text-align: center;
+  max-width: 400px;
+  padding: 0 20px;
+}
+
 .page-header h1 {
   font-size: 2.0em;
   text-align: center;
   font-weight: 100;
   line-height: 1.3;
   color: #333;
-  margin: 1em 0 1em 0;
+  margin: 0;
+}
+
+.page-header p {
+  line-height: 1.4;
+  font-size: 1.1em;
+  font-style: italic;
+  color: #888;
 }
 
 .page-header h1 i {
@@ -91,7 +114,8 @@ button {
 
 @media (min-width: 480px) {
   .page-header h1 {
-    font-size: 3em;
-    margin: 1.5em 0 1.5em 0;
+    font-size: 3em; }
+  .page-header {
+    margin: 3.5em auto;
   }
 }
