From 79397a4ed3da55f97f312ea8c4647d3e9c398357 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Wed, 4 May 2022 19:29:27 +0200
Subject: [PATCH] Web: Style spinner

Forked from supahfunk's https://codepen.io/supah/pen/BjYLdW
---
 web/app/src/App.vue                   |  2 +-
 web/app/src/components/ApiSpinner.vue | 73 +++++++++++++++++++++++++--
 2 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/web/app/src/App.vue b/web/app/src/App.vue
index 951274da..4fb0950f 100644
--- a/web/app/src/App.vue
+++ b/web/app/src/App.vue
@@ -8,8 +8,8 @@
         <li><a href="/">Settings</a></li>
       </ul>
     </nav>
+    <api-spinner />
     <span class="app-version">
-      <api-spinner />
       version: {{ flamencoVersion }}
     </span>
   </header>
diff --git a/web/app/src/components/ApiSpinner.vue b/web/app/src/components/ApiSpinner.vue
index cf7ec192..ec622acb 100644
--- a/web/app/src/components/ApiSpinner.vue
+++ b/web/app/src/components/ApiSpinner.vue
@@ -1,5 +1,9 @@
 <template>
-  <span class="api-spinner" :class="{ running: apiQueryCount.num > 0 }">&#128008;</span>
+  <span class="api-spinner" :class="{ running: apiQueryCount.num > 0 }">
+    <svg class="spinner" viewBox="0 0 50 50">
+      <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
+    </svg>
+  </span>
 </template>
 
 <script>
@@ -16,8 +20,71 @@ export default {
 span {
   visibility: hidden;
   opacity: 0;
-  transition-delay: 100ms;
-  transition-duration: 300ms;
+  transition-delay: 250ms;
+  transition-duration: 500ms;
+  font-weight: bold;
+  margin-right: 2rem;
+  position: relative;
+}
+
+.spinner {
+  -webkit-animation: rotate 2s linear infinite;
+          animation: rotate 2s linear infinite;
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -10px 0 0 -10px;
+  width: 20px;
+  height: 20px;
+}
+.spinner .path {
+  stroke: var(--color-text-hint);
+  stroke-linecap: round;
+  -webkit-animation: dash 1.5s ease-in-out infinite;
+          animation: dash 1.5s ease-in-out infinite;
+}
+
+@-webkit-keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
 }
 
 span.running {