From 19d1582ae49abe158fa4e2707ec7b1d9d6c5535b Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Fri, 15 Mar 2019 17:38:57 +0000
Subject: [PATCH] Add animation to rotate 'in progress' icon

Fixes #2
---
 .../Environment/TaskLog/TaskLogItem.vue         | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/Environment/TaskLog/TaskLogItem.vue b/src/components/Environment/TaskLog/TaskLogItem.vue
index 490539b..267c5f4 100644
--- a/src/components/Environment/TaskLog/TaskLogItem.vue
+++ b/src/components/Environment/TaskLog/TaskLogItem.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="px-3 py-4 border-b border-grey-3 flex" :class="{'bg-yellow-lightest': open}">
       <div class="flex-none mr-3">
-        <svg v-if="task.loading" class="h-5 w-5 text-grey fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
+        <svg v-if="task.loading" class="h-5 w-5 text-grey-5 fill-current rotates" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
         <svg v-if="!task.loading && task.success" class="h-5 w-5 text-green fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__success-circle"></use></svg>
         <svg v-if="!task.loading && !task.success" class="h-5 w-5 text-red fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__warning"></use></svg>
       </div>
@@ -78,3 +78,18 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.rotates {
+  animation: rotation 1s infinite linear
+}
+
+@-webkit-keyframes rotation {
+  from {
+    -webkit-transform: rotate(0deg)
+  }
+  to {
+    -webkit-transform: rotate(-359deg)
+  }
+}
+</style>