update README.md and demo page with new colors and update version

Author: JoshK2

README.md

@@ -9,6 +9,11 @@
   <a href="https://bit.dev/joshk/vue-spinners-css"><img src="https://i.imagesup.co/images2/e5832341d5d3e440221cf80650042792a99e39f7.gif"></a>
 </p>
 Amazing collection of pure CSS vue spinners components of css spinners for ajax or loading animation based on loading.io.  
+
+## [Live Demo](https://bit.dev/joshk/vue-spinners-css)
+
+Browse components and explore their props with [Bit](https://bit.dev/joshk/vue-spinners-css).  
+Install specific vue spinner component with npm, yarn, unpkg or bit without having to install the whole project.  
 [Install components and live demo](https://bit.dev/joshk/vue-spinners-css)
 
 ## 🚀 List of Spinners - PropTypes and Default Props

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-spinners-css",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "repository": {
     "type": "git",

package.json

@@ -1,64 +1,64 @@
 <template>
     <div id="app">
-        <h2>Color Property</h2>
+        <h1 style="text-align: center;">Vue Spinners</h1>
         <div class="block">
-            <CircleLoader :color="'black'" />
-            <CircleLoader :color="'#de3541'" />
+            <CircleLoader :color="'#54f1d2'" />
+            <CircleLoader :color="'#be97e8'" />
             <CircleLoader />
         </div>
         <div class="block">
-            <DefaultLoader :color="'black'" />
-            <DefaultLoader :color="'#de3541'" />
+            <DefaultLoader :color="'#54f1d2'" />
+            <DefaultLoader :color="'#be97e8'" />
             <DefaultLoader />
         </div>
         <div class="block">
-            <DualRingLoader :color="'black'" />
-            <DualRingLoader :color="'#de3541'" />
+            <DualRingLoader :color="'#54f1d2'" />
+            <DualRingLoader :color="'#be97e8'" />
             <DualRingLoader />
         </div>
         <div class="block">
-            <EllipsisLoader :color="'black'" />
-            <EllipsisLoader :color="'#de3541'" />
+            <EllipsisLoader :color="'#54f1d2'" />
+            <EllipsisLoader :color="'#be97e8'" />
             <EllipsisLoader />
         </div>
         <div class="block">
-            <FacebookLoader :color="'black'" />
-            <FacebookLoader :color="'#de3541'" />
+            <FacebookLoader :color="'#54f1d2'" />
+            <FacebookLoader :color="'#be97e8'" />
             <FacebookLoader />
         </div>
         <div class="block">
-            <GridLoader :color="'black'" />
-            <GridLoader :color="'#de3541'" />
+            <GridLoader :color="'#54f1d2'" />
+            <GridLoader :color="'#be97e8'" />
             <GridLoader />
         </div>
         <div class="block">
-            <HeartLoader :color="'black'" />
-            <HeartLoader :color="'#de3541'" />
+            <HeartLoader :color="'#54f1d2'" />
+            <HeartLoader :color="'#be97e8'" />
             <HeartLoader />
         </div>
         <div class="block">
-            <HourglassLoader :color="'black'" />
-            <HourglassLoader :color="'#de3541'" />
+            <HourglassLoader :color="'#54f1d2'" />
+            <HourglassLoader :color="'#be97e8'" />
             <HourglassLoader />
         </div>
         <div class="block">
-            <RingLoader :color="'black'" />
-            <RingLoader :color="'#de3541'" />
+            <RingLoader :color="'#54f1d2'" />
+            <RingLoader :color="'#be97e8'" />
             <RingLoader />
         </div>
         <div class="block">
-            <RippleLoader :color="'black'" />
-            <RippleLoader :color="'#de3541'" />
+            <RippleLoader :color="'#54f1d2'" />
+            <RippleLoader :color="'#be97e8'" />
             <RippleLoader />
         </div>
         <div class="block">
-            <RollerLoader :color="'black'" />
-            <RollerLoader :color="'#de3541'" />
+            <RollerLoader :color="'#54f1d2'" />
+            <RollerLoader :color="'#be97e8'" />
             <RollerLoader />
         </div>
         <div class="block">
-            <SpinnerLoader :color="'black'" />
-            <SpinnerLoader :color="'#de3541'" />
+            <SpinnerLoader :color="'#54f1d2'" />
+            <SpinnerLoader :color="'#be97e8'" />
             <SpinnerLoader />
         </div>
         <div style="clear: both"></div>

src/App.vue

@@ -1,2 +1,2 @@
 export * from './components'
-export * from './install'
+export * from './install'

src/index.js

@@ -1,15 +1,15 @@
 import * as components from './components'
 
 const install = (Vue, options = {}) => {
-  for (let key in components) {
-    let _key = options.prefix ? options.prefix + key : key
-    Vue.component(_key, components[key])
-  }
+    for (let key in components) {
+        let _key = options.prefix ? options.prefix + key : key
+        Vue.component(_key, components[key])
+    }
 }
 
 // auto install
 if (typeof window !== 'undefined' && window.Vue) {
-  install(window.Vue)
+    install(window.Vue)
 }
 
-export { install }
+export { install }