Add styled loader vue component

galaxyproject · Nov 28, 2018 · 83417ca · 83417ca
1 parent 2376d7f
commit 83417ca
Showing 1 changed file with 155 additions and 0 deletions.
diff --git a/client/galaxy/scripts/components/GalaxyLoader.vue b/client/galaxy/scripts/components/GalaxyLoader.vue
@@ -0,0 +1,155 @@
+<template>
+    <div class="galaxy-loader"
+         :class="[`galaxy-loader_${style}`, {'galaxy-loader_center': center}]"
+         :style="{transform: `scale(${size/100})`}">
+        <div class="galaxy-loader_strip-1"></div>
+        <div class="galaxy-loader_strip-2"></div>
+        <div class="galaxy-loader_strip-3"></div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            style: {
+                type: String,
+                default: "light"
+            },
+            size: {
+                type: Number,
+                default: 100
+            },
+            center: {
+                type: Boolean,
+                default: false
+            }
+        }
+    };
+</script>
+
+<style>
+    .galaxy-loader.galaxy-loader_center {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+    }
+
+    .galaxy-loader {
+        display: inline-block;
+        width: 100px;
+        height: 100px;
+        border-radius: 50px;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .galaxy-loader_light {
+        background-color: transparent;
+        border: 2px solid #58585a;
+        box-sizing: border-box;
+    }
+
+    .galaxy-loader_dark {
+        background-color: #2c3143;
+        border: 2px solid #2c3143;
+        box-sizing: border-box;
+    }
+
+    .galaxy-loader_eu {
+        background-color: transparent;
+        border: 2px solid #063591;
+        box-sizing: border-box;
+    }
+
+    .galaxy-loader > div {
+        background-color: rgba(255, 0, 0, 0.3);
+        display: block;
+        height: 18px;
+        position: absolute;
+        border-radius: 2px;
+
+        -webkit-animation: galaxy-loader_animation 1.2s infinite ease-in-out;
+        animation: galaxy-loader_animation 1.2s infinite ease-in-out;
+    }
+
+    .galaxy-loader > .galaxy-loader_strip-1 {
+        top: 16px;
+        left: 13px;
+        width: 59px;
+
+        -webkit-animation-delay: -1.2s;
+        animation-delay: -1.2s;
+    }
+
+    .galaxy-loader > .galaxy-loader_strip-2 {
+        top: 39px;
+        left: 13px;
+        width: 44px;
+
+        -webkit-animation-delay: -1.1s;
+        animation-delay: -1.1s;
+    }
+
+    .galaxy-loader > .galaxy-loader_strip-3 {
+        top: 61px;
+        left: 25px;
+        width: 59px;
+
+        -webkit-animation-delay: -1.0s;
+        animation-delay: -1.0s;
+    }
+
+    .galaxy-loader_light > .galaxy-loader_strip-1, .galaxy-loader_light > .galaxy-loader_strip-2 {
+        background-color: #58585a;
+    }
+
+    .galaxy-loader_light > .galaxy-loader_strip-3 {
+        background: linear-gradient(to right, rgba(207, 188, 59, 1), rgba(207, 188, 59, 1) 20%, rgba(207, 188, 59, 0) 100%);
+    }
+
+    .galaxy-loader_dark > .galaxy-loader_strip-1, .galaxy-loader_dark > .galaxy-loader_strip-2 {
+        background-color: white;
+    }
+
+    .galaxy-loader_dark > .galaxy-loader_strip-3 {
+        background: linear-gradient(to right, rgba(207, 188, 59, 1), rgba(207, 188, 59, 1) 20%, rgba(207, 188, 59, 0) 100%);
+    }
+
+    .galaxy-loader_eu > .galaxy-loader_strip-1, .galaxy-loader_eu > .galaxy-loader_strip-2 {
+        background-color: #063591;
+    }
+
+    .galaxy-loader_eu > .galaxy-loader_strip-3 {
+        background: linear-gradient(to right, rgba(207, 188, 59, 1), rgba(207, 188, 59, 1) 20%, rgba(207, 188, 59, 0) 100%);
+    }
+
+    @-webkit-keyframes galaxy-loader_animation {
+        0%, 60%, 100% {
+            -webkit-transform: scaleX(1)
+        }
+        20% {
+            -webkit-transform: scaleX(0.8)
+        }
+        40% {
+            -webkit-transform: scaleX(1.2)
+        }
+    }
+
+    @keyframes galaxy-loader_animation {
+        0%, 60%, 100% {
+            transform: scaleX(1);
+            -webkit-transform: scaleX(1);
+        }
+        20% {
+            transform: scaleX(0.8);
+            -webkit-transform: scaleX(0.8);
+        }
+        40% {
+            transform: scaleX(1.2);
+            -webkit-transform: scaleX(1.2);
+        }
+    }
+</style>