added 12 loader

JoshK2 · Sep 5, 2019 · 9e7fd9c · 9e7fd9c
1 parent 98ddc22
commit 9e7fd9c
Show file tree

Hide file tree

Showing 20 changed files with 1,215 additions and 78 deletions.
diff --git a/.bitmap b/.bitmap
@@ -0,0 +1,5 @@
+/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
+
+{
+    "version": "14.2.5"
+}
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true,
+    "printWidth": 120
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "build:lib": "",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "format": "prettier --write \"src/**/*.vue\" \"src/**/*.js\""
   },
   "dependencies": {
     "core-js": "^2.6.5",
@@ -19,6 +20,7 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "prettier": "^1.18.2",
     "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {
@@ -43,5 +45,12 @@
   "browserslist": [
     "> 1%",
     "last 2 versions"
-  ]
+  ],
+  "bit": {
+    "env": {
+      "compiler": "bit.envs/bundlers/[email protected]"
+    },
+    "componentsDefaultDirectory": "components/{name}",
+    "packageManager": "npm"
+  }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -1,29 +1,119 @@
 <template>
-  <div id="app">
-    <CircleLoader :loading="false" />
-    <CircleLoader :loading="true" />
-    <CircleLoader color="yellow" />
-  </div>
+    <div id="app">
+        <h2>Color Property</h2>
+        <div class="block">
+            <CircleLoader :color="'black'" />
+            <CircleLoader :color="'#de3541'" />
+            <CircleLoader />
+        </div>
+        <div class="block">
+            <DefaultLoader :color="'black'" />
+            <DefaultLoader :color="'#de3541'" />
+            <DefaultLoader />
+        </div>
+        <div class="block">
+            <DualRingLoader :color="'black'" />
+            <DualRingLoader :color="'#de3541'" />
+            <DualRingLoader />
+        </div>
+        <div class="block">
+            <EllipsisLoader :color="'black'" />
+            <EllipsisLoader :color="'#de3541'" />
+            <EllipsisLoader />
+        </div>
+        <div class="block">
+            <FacebookLoader :color="'black'" />
+            <FacebookLoader :color="'#de3541'" />
+            <FacebookLoader />
+        </div>
+        <div class="block">
+            <GridLoader :color="'black'" />
+            <GridLoader :color="'#de3541'" />
+            <GridLoader />
+        </div>
+        <div class="block">
+            <HeartLoader :color="'black'" />
+            <HeartLoader :color="'#de3541'" />
+            <HeartLoader />
+        </div>
+        <div class="block">
+            <HourglassLoader :color="'black'" />
+            <HourglassLoader :color="'#de3541'" />
+            <HourglassLoader />
+        </div>
+        <div class="block">
+            <RingLoader :color="'black'" />
+            <RingLoader :color="'#de3541'" />
+            <RingLoader />
+        </div>
+        <div class="block">
+            <RippleLoader :color="'black'" />
+            <RippleLoader :color="'#de3541'" />
+            <RippleLoader />
+        </div>
+        <div class="block">
+            <RollerLoader :color="'black'" />
+            <RollerLoader :color="'#de3541'" />
+            <RollerLoader />
+        </div>
+        <div class="block">
+            <SpinnerLoader :color="'black'" />
+            <SpinnerLoader :color="'#de3541'" />
+            <SpinnerLoader />
+        </div>
+        <div style="clear: both"></div>
+    </div>
 </template>
 
 <script>
-import CircleLoader from './components/circle-loader.vue';
+import CircleLoader from './components/CircleLoader.vue'
+import DefaultLoader from './components/DefaultLoader.vue'
+import DualRingLoader from './components/DualRingLoader.vue'
+import EllipsisLoader from './components/EllipsisLoader.vue'
+import FacebookLoader from './components/FacebookLoader'
+import GridLoader from './components/GridLoader.vue'
+import HeartLoader from './components/HeartLoader.vue'
+import HourglassLoader from './components/HourglassLoader.vue'
+import RingLoader from './components/RingLoader.vue'
+import RippleLoader from './components/RippleLoader.vue'
+import RollerLoader from './components/RollerLoader.vue'
+import SpinnerLoader from './components/SpinnerLoader.vue'
 
 export default {
-  name: 'app',
-  components: {
-    CircleLoader
-  }
+    name: 'app',
+    components: {
+        CircleLoader,
+        DefaultLoader,
+        DualRingLoader,
+        EllipsisLoader,
+        FacebookLoader,
+        GridLoader,
+        HeartLoader,
+        HourglassLoader,
+        RingLoader,
+        RippleLoader,
+        RollerLoader,
+        SpinnerLoader,
+    },
 }
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+    text-align: center;
+    width: 564px;
+    margin: auto;
+}
+.block {
+    float: left;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    width: 240px;
+    height: 84px;
+    margin: 10px;
+    padding: 10px;
+}
+.loader {
+    margin: 20px;
 }
 </style>
diff --git a/src/components/CircleLoader.vue b/src/components/CircleLoader.vue
@@ -0,0 +1,53 @@
+<template>
+    <div v-show="loading" class="lds-circle" v-bind:style="[spinnerStyle]"></div>
+</template>
+
+<script>
+export default {
+    name: 'CircleLoader',
+    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>
diff --git a/src/components/DefaultLoader.vue b/src/components/DefaultLoader.vue
@@ -0,0 +1,127 @@
+<template>
+    <div v-show="loading" class="lds-default">
+        <div v-bind:style="[spinnerStyle]"></div>
+        <div v-bind:style="[spinnerStyle]"></div>
+        <div v-bind:style="[spinnerStyle]"></div>
+        <div v-bind:style="[spinnerStyle]"></div>
+        <div v-bind:style="[spinnerStyle]"></div>
+        <div v-bind:style="[spinnerStyle]"></div>
+        <div v-bind:style="[spinnerStyle]"></div>
+        <div v-bind:style="[spinnerStyle]"></div>
+        <div v-bind:style="[spinnerStyle]"></div>
+        <div v-bind:style="[spinnerStyle]"></div>
+        <div v-bind:style="[spinnerStyle]"></div>
+        <div v-bind:style="[spinnerStyle]"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DefaultLoader',
+    props: {
+        loading: {
+            type: Boolean,
+            default: true,
+        },
+        color: {
+            type: String,
+            default: '#7f58af',
+        },
+    },
+    data() {
+        return {
+            spinnerStyle: {
+                background: this.color,
+            },
+        }
+    },
+}
+</script>
+
+<style>
+.lds-default {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+.lds-default div {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: #fff;
+    border-radius: 50%;
+    animation: lds-default 1.2s linear infinite;
+}
+.lds-default div:nth-child(1) {
+    animation-delay: 0s;
+    top: 37px;
+    left: 66px;
+}
+.lds-default div:nth-child(2) {
+    animation-delay: -0.1s;
+    top: 22px;
+    left: 62px;
+}
+.lds-default div:nth-child(3) {
+    animation-delay: -0.2s;
+    top: 11px;
+    left: 52px;
+}
+.lds-default div:nth-child(4) {
+    animation-delay: -0.3s;
+    top: 7px;
+    left: 37px;
+}
+.lds-default div:nth-child(5) {
+    animation-delay: -0.4s;
+    top: 11px;
+    left: 22px;
+}
+.lds-default div:nth-child(6) {
+    animation-delay: -0.5s;
+    top: 22px;
+    left: 11px;
+}
+.lds-default div:nth-child(7) {
+    animation-delay: -0.6s;
+    top: 37px;
+    left: 7px;
+}
+.lds-default div:nth-child(8) {
+    animation-delay: -0.7s;
+    top: 52px;
+    left: 11px;
+}
+.lds-default div:nth-child(9) {
+    animation-delay: -0.8s;
+    top: 62px;
+    left: 22px;
+}
+.lds-default div:nth-child(10) {
+    animation-delay: -0.9s;
+    top: 66px;
+    left: 37px;
+}
+.lds-default div:nth-child(11) {
+    animation-delay: -1s;
+    top: 62px;
+    left: 52px;
+}
+.lds-default div:nth-child(12) {
+    animation-delay: -1.1s;
+    top: 52px;
+    left: 62px;
+}
+@keyframes lds-default {
+    0%,
+    20%,
+    80%,
+    100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.5);
+    }
+}
+</style>