first commit

Author: JoshK2

README.md

@@ -1,29 +1,3 @@
 # vue-spinners-css
 
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Run your tests
-```
-npm run test
-```
-
-### Lints and fixes files
-```
-npm run lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+Under developement!

package.json

@@ -1,10 +1,11 @@
 {
   "name": "vue-spinners-css",
-  "version": "0.1.0",
-  "private": true,
+  "version": "0.0.1",
+  "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build:lib": "",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

src/App.vue

@@ -1,17 +1,18 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <CircleLoader :loading="false" />
+    <CircleLoader :loading="true" />
+    <CircleLoader color="yellow" />
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import CircleLoader from './components/circle-loader.vue';
 
 export default {
   name: 'app',
   components: {
-    HelloWorld
+    CircleLoader
   }
 }
 </script>

src/components/HelloWorld.vue

@@ -0,0 +1,52 @@
+<template>
+  <div v-show="loading" class="lds-circle" v-bind:style="[spinnerStyle]"></div>
+</template>
+
+<script>
+export default {
+  name: 'circle-loader',
+  props: {
+    loading: {
+      type: Boolean,
+      default: true
+    },
+    color: { 
+      type: String,
+      default: '#7f58af'
+    }
+  },
+  data () {
+    return {
+      spinnerStyle: {
+      	background: this.color
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.lds-circle {
+    display: inline-block;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border-radius: 50%;
+    animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+  }
+@keyframes lds-circle {
+    0%, 100% {
+      animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+    }
+    0% {
+      transform: rotateY(0deg);
+    }
+    50% {
+      transform: rotateY(1800deg);
+      animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+    }
+    100% {
+      transform: rotateY(3600deg);
+    }
+}
+</style>

src/components/circle-loader.vue

@@ -0,0 +1,5 @@
+import CircleLoader from './CircleLoader/circle-loader.vue';
+
+export default {
+    CircleLoader
+}