🎨 first pass at animated icons for save-state buttons

refs TryGhost/Ghost#7515
- adds animated spinner and check SVG icons
- improves SVG sizing/alignment in buttons
- disables old technique of fixing button size because it doesn't work now that buttons have more than a single spinner when running/saved/failed

app/components/gh-task-button.js

@@ -94,11 +94,11 @@ const GhTaskButton = Component.extend({
     setSize: observer('isRunning', function () {
         if (this.get('isRunning')) {
             this.set('hasRun', true);
-            this.$().width(this.$().width());
-            this.$().height(this.$().height());
+            // this.$().width(this.$().width());
+            // this.$().height(this.$().height());
         } else {
-            this.$().width('');
-            this.$().height('');
+            // this.$().width('');
+            // this.$().height('');
         }
     })
 });

app/styles/patterns/buttons.css

@@ -292,23 +292,45 @@ fieldset[disabled] .gh-btn {
     display: flex;
     align-items: center;
     justify-content: center;
+
 }
 
 .gh-btn-icon svg {
-    margin-right: 10px;
-    height: 13px;
+    width: 1em;
+    height: 1em;
+    margin-right: 0.5em;
     fill: #fff;
 }
 
 .gh-btn-icon-right svg {
-    margin-left: 10px;
+    margin-left: 0.5em;
     margin-right: 0;
 }
 
 .gh-btn-icon svg path {
     stroke: #fff;
 }
 
+/*
+/* Animated button icons
+/* ---------------------------------------------------------- */
+
+path.animated-check-circle {
+    stroke: white;
+    stroke-dashoffset: 300;
+    stroke-dasharray: 300;
+    animation: dash 4s ease-out forwards;
+}
+
+@keyframes dash {
+    0% {
+        stroke-dashoffset: 300;
+    }
+    100% {
+        stroke-dashoffset: 0;
+    }
+}
+
 
 /*
 /* Loading Button Spinner

app/styles/patterns/icons.css

@@ -1,3 +1,19 @@
+path.animated-check-circle {
+    stroke: white;
+    stroke-dashoffset: 300;
+    stroke-dasharray: 300;
+    animation: dash 4s ease-out forwards;
+}
+
+@keyframes dash {
+    0% {
+        stroke-dashoffset: 300;
+    }
+    100% {
+        stroke-dashoffset: 0;
+    }
+}
+
 /* Icons
 /* ---------------------------------------------------------- */
 /* CUSTOM GENERATED FILE */

app/templates/components/gh-task-button.hbs

@@ -7,7 +7,7 @@
     )}}
 {{else}}
     <span>
-    {{#if isRunning}}<span class="spinner"></span>{{/if}}
+    {{#if isRunning}}{{inline-svg "spinner"}}{{/if}}
     {{if (or isIdle isRunning) buttonText}}
     {{#if isSuccess}}{{inline-svg "check-circle"}} {{successText}}{{/if}}
     {{#if isFailure}}{{inline-svg "close"}} {{failureText}}{{/if}}