Joined all Circle icons into Loading component

The loading component receives a promise which is used to display
states: loading, success and error. When displaying error you can reject
with string 'warning' to fail with another component.

src/lib/components/loading/CircleCheckmark.svelte

@@ -1,6 +1,6 @@
 <svg width="49" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
   <g transform="translate(24,24)">
-    <g class="loading-group CheckSuccess" opacity="0" style="animation-delay: 700ms">
+    <g class="loading-group CheckSuccess" opacity="0">
       <path
         class="loading-icon"
         fill="none"
@@ -10,8 +10,7 @@
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-dasharray="28 28"
-        stroke-dashoffset="28"
-        style="animation-delay: 700ms"></path>
+        stroke-dashoffset="28"></path>
     </g>
   </g>
   <path
@@ -25,8 +24,7 @@
     stroke-dasharray="145 145"
     stroke-linejoin="round"
     stroke-miterlimit="1"
-    transform="translate(24,24) rotate(-35)"
-    style="animation-delay: 700ms"></path>
+    transform="translate(24,24) rotate(-35)"></path>
 </svg>
 
 <style lang="scss" module="scoped">

src/lib/components/loading/CircleError.svelte

@@ -1,6 +1,6 @@
 <svg width="49" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
   <g transform="translate(24,24)">
-    <g class="loading-group CheckError" opacity="0" style="animation-delay: 700ms">
+    <g class="loading-group CheckError" opacity="0">
       <path
         class="loading-icon"
         fill="none"
@@ -10,8 +10,7 @@
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-dasharray="28 28"
-        stroke-dashoffset="28"
-        style="animation-delay: 700ms"></path>
+        stroke-dashoffset="28"></path>
     </g>
   </g>
   <path
@@ -25,8 +24,7 @@
     stroke-dasharray="145 145"
     stroke-linejoin="round"
     stroke-miterlimit="1"
-    transform="translate(24,24) rotate(-35)"
-    style="animation-delay: 700ms"></path>
+    transform="translate(24,24) rotate(-35)"></path>
 </svg>
 
 <style lang="scss" module="scoped">

src/lib/components/loading/CircleLoading.svelte

@@ -0,0 +1,48 @@
+<svg width="49" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <path
+    class="loading-circle"
+    fill="none"
+    stroke="grey"
+    stroke-width="2"
+    d="M23 0c0 12.7-10.3 23-23 23c-12.7 0-23-10.3-23-23c0-12.7 10.3-23 23-23c12.7 0 23 10.3 23 23"
+    stroke-linecap="round"
+    stroke-dashoffset="145"
+    stroke-dasharray="145 145"
+    stroke-linejoin="round"
+    stroke-miterlimit="1"
+    transform="translate(24,24) rotate(-35)"
+    style="animation-delay: 100ms"></path>
+</svg>
+
+<style lang="scss" module="scoped">
+  .loading-circle {
+    -webkit-animation: drawCircle 1.5s linear both;
+    animation: drawCircle 1.5s linear both;
+    animation-iteration-count: infinite;
+  }
+
+  svg {
+    animation: rotateCircle 1.5s linear both;
+    animation-iteration-count: infinite;
+  }
+
+  @keyframes rotateCircle {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes drawCircle {
+    0% {
+      stroke-dashoffset: 145px;
+    }
+
+    to {
+      stroke-dashoffset: -145px;
+    }
+  }
+</style>

src/lib/components/loading/CircleWarning.svelte

@@ -1,6 +1,6 @@
 <svg width="49" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
   <g transform="translate(24,24)">
-    <g class="loading-group CheckWarning" opacity="0" style="animation-delay: 700ms">
+    <g class="loading-group CheckWarning" opacity="0">
       <path
         class="loading-icon"
         fill="none"
@@ -10,8 +10,7 @@
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-dasharray="28 28"
-        stroke-dashoffset="28"
-        style="animation-delay: 700ms"></path>
+        stroke-dashoffset="28"></path>
     </g>
   </g>
   <path
@@ -25,8 +24,7 @@
     stroke-dasharray="145 145"
     stroke-linejoin="round"
     stroke-miterlimit="1"
-    transform="translate(24,24) rotate(-35)"
-    style="animation-delay: 700ms"></path>
+    transform="translate(24,24) rotate(-35)"></path>
 </svg>
 
 <style lang="scss" module="scoped">

src/lib/components/loading/index.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import CircleLoading from './CircleLoading.svelte';
+  import CircleCheckmark from './CircleCheckmark.svelte';
+  import CircleWarning from './CircleWarning.svelte';
+  import CircleError from './CircleError.svelte';
+
+  export let promise: Promise<any>;
+</script>
+
+{#await promise}
+  <CircleLoading />
+{:then}
+  <CircleCheckmark />
+{:catch type}
+  {#if type === 'warning'}
+    <CircleWarning />
+  {:else if type === 'error'}
+    <CircleError />
+  {:else}
+    <CircleError />
+  {/if}
+{/await}