initial commit

2018-12-12 11:46:29 +01:00
commit eb12f3cb41
43 changed files with 25172 additions and 0 deletions
--- a/frontend/src/components/Spinner.vue
+++ b/frontend/src/components/Spinner.vue
@ -0,0 +1,97 @@
+<template>
+  <div class="center">
+    <div class="spinner">
+      <div class="gear1"></div>
+      <div class="gear2"></div>
+      <div class="gear3"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Spinner"
+};
+</script>
+
+
+<style>
+.center {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-top: 0px;
+  margin-left: 0px;
+}
+
+.spinner {
+  position: absolute;
+  width: 256px;
+  height: 256px;
+  top: -128px;
+  left: -128px;
+  filter: drop-shadow(10px 10px 2px rgba(0, 0, 0, 1));
+}
+
+.gear1,
+.gear2,
+.gear3 {
+  position: absolute;
+  background-repeat: no-repeat;
+}
+
+.gear1,
+.gear2 {
+  background-image: url("../assets/spinner.svg");
+  width: 115px;
+  height: 115px;
+  top: 55px;
+  left: 55px;
+  animation: sk-cubemove 1.8s infinite cubic-bezier(1, 0, 0, 1) reverse;
+}
+
+.gear2 {
+  top: 118px;
+  left: 118px;
+  width: 80px;
+  height: 80px;
+  transform: rotate(25deg);
+  animation: sk-cubemove2 1.8s infinite cubic-bezier(1, 0, 0, 1);
+}
+
+.gear3 {
+  background-image: url("../assets/spinner_outer.svg");
+  width: 256px;
+  height: 256px;
+  animation: sk-cubemove 1.8s infinite cubic-bezier(1, 0, 0, 1);
+}
+
+@keyframes sk-cubemove {
+  25% {
+    transform: rotate(90deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  75% {
+    transform: rotate(270deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes sk-cubemove2 {
+  25% {
+    transform: rotate(115deg);
+  }
+  50% {
+    transform: rotate(205deg);
+  }
+  75% {
+    transform: rotate(295deg);
+  }
+  100% {
+    transform: rotate(385deg);
+  }
+}
+</style>