Faster Loading component

- Finished examples/custom-routes/

examples/custom-routes/pages/_user.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="user">
     <h3>{{ name }}</h3>
+    <h4>@{{ username }}</h4>
     <p>Email : {{ email }}</p>
+    <p><router-link to="/">List of users</router-link></p>
   </div>
 </template>
 
@@ -16,5 +18,10 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+.user {
+  text-align: center;
+  margin-top: 100px;
+  font-family: sans-serif;
+}
 </style>

examples/custom-routes/pages/index.vue

@@ -1,10 +1,12 @@
 <template>
-  <ul class="users">
+  <div class="container">
     <h2>Users</h2>
+    <ul class="users">
       <li v-for="user in users">
         <router-link :to="{ name: 'user', params: { id: user.id } }">{{ user.name }}</router-link>
       </li>
     </ul>
+  </div>
 </template>
 
 <script>
@@ -20,6 +22,25 @@ export default {
 }
 </script>
 
-<style>
-
+<style scoped>
+.container {
+  text-align: center;
+  margin-top: 100px;
+  font-family: sans-serif;
+}
+.users {
+  list-style-type: none;
+}
+.users li a {
+  display: inline-block;
+  width: 200px;
+  border: 1px #ddd solid;
+  padding: 10px;
+  text-align: left;
+  color: #222;
+  text-decoration: none;
+}
+.users li a:hover {
+  color: orange;
+}
 </style>

lib/app/components/Loading.vue

@@ -73,9 +73,9 @@ export default {
         Vue.nextTick(() => {
           setTimeout(() => {
             this.percent = 0
-          }, 100)
+          }, 200)
         })
-      }, 800)
+      }, 500)
       return this
     },
     fail () {
@@ -96,7 +96,7 @@ export default {
   right: 0px;
   height: 2px;
   width: 0%;
-  transition: width 0.2s, opacity 0.6s;
+  transition: width 0.2s, opacity 0.4s;
   opacity: 1;
   background-color: #efc14e;
   z-index: 999999;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
   "main": "index.js",
   "license": "MIT",