From 459b222e2b3da6a85a6d1a66702d0960ea98c300 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Sat, 14 Aug 2021 13:39:46 +0200
Subject: [PATCH] ReadySet animation

---
 client/src/components/ReadySet.vue | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/client/src/components/ReadySet.vue b/client/src/components/ReadySet.vue
index ef255d4..7e33e0e 100644
--- a/client/src/components/ReadySet.vue
+++ b/client/src/components/ReadySet.vue
@@ -2,6 +2,8 @@
   <div class="ready-set">
     <div class="ready-set__container">
       <div class="ready-set__box1" />
+      <div class="ready-set__box2" />
+      <div class="ready-set__box3" />
       <div class="ready-set__text">{{ text }}</div>
     </div>
   </div>
@@ -34,6 +36,31 @@ export default {
     background-color: #6040c0;
     z-index: 5;
   }
+
+  &__box2 {
+    position: absolute;
+    left: 90px;
+    top: 90px;
+    width: 420px;
+    height: 420px;
+    border-radius: 150px;
+    background-color: rgba(128,128,64,0.5);
+    animation: spin-rev 5s linear infinite;
+    z-index: 4;
+  }
+
+  &__box3 {
+    position: absolute;
+    left: 90px;
+    top: 90px;
+    width: 420px;
+    height: 420px;
+    border-radius: 150px;
+    background-color: rgba(128,128,64,0.5);
+    z-index: 3;
+    animation: spin 6s linear infinite;
+  }
+
   &__text {
     position: absolute;
     width: 600px;
@@ -46,4 +73,6 @@ export default {
     z-index: 10;
   }
 }
+@keyframes spin { 100% { transform: rotate(360deg); } }
+@keyframes spin-rev { 100% { transform: rotate(-360deg); } }
 </style>