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

@@ -0,0 +1,32 @@
+<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">
+      <path
+        class="loading-icon"
+        fill="none"
+        d="M-10 1.5c0 0 6.5 6 6.5 6c0 0 13.5-13 13.5-13"
+        stroke="#24B47E"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-dasharray="28 28"
+        stroke-dashoffset="28"></path>
+    </g>
+  </g>
+  <path
+    class="loading-circle"
+    fill="none"
+    stroke="#24B47E"
+    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)"></path>
+</svg>
+
+<style lang="scss" module="scoped">
+  @import './circle-feedback.scss';
+</style>

src/lib/components/loading/CircleError.svelte

@@ -0,0 +1,32 @@
+<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">
+      <path
+        class="loading-icon"
+        fill="none"
+        d="M -10 -10 l 20 20 M -10 10 l 20 -20"
+        stroke="#FF6245"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-dasharray="28 28"
+        stroke-dashoffset="28"></path>
+    </g>
+  </g>
+  <path
+    class="loading-circle"
+    fill="none"
+    stroke="#FF6245"
+    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)"></path>
+</svg>
+
+<style lang="scss" module="scoped">
+  @import './circle-feedback.scss';
+</style>

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

@@ -0,0 +1,32 @@
+<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">
+      <path
+        class="loading-icon"
+        fill="none"
+        d="M 0 -12 v 15 m 0 6 v 3"
+        stroke="#FFC107"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-dasharray="28 28"
+        stroke-dashoffset="28"></path>
+    </g>
+  </g>
+  <path
+    class="loading-circle"
+    fill="none"
+    stroke="#FFC107"
+    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)"></path>
+</svg>
+
+<style lang="scss" module="scoped">
+  @import './circle-feedback.scss';
+</style>

src/lib/components/loading/circle-feedback.scss

@@ -0,0 +1,178 @@
+.loading-group {
+  -webkit-animation: fadeIn 1s linear both;
+  animation: fadeIn 1s linear both;
+}
+
+.loading-icon {
+  -webkit-animation: drawCheckmark 1s linear both;
+  animation: drawCheckmark 1s linear both;
+}
+
+.loading-circle {
+  -webkit-animation: checkmarkCircleShimmer 1s linear both, drawCircle 1s linear both;
+  animation: checkmarkCircleShimmer 1s linear both, drawCircle 1s linear both;
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  13.3% {
+    opacity: 0;
+  }
+
+  15% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  13.3% {
+    opacity: 0;
+  }
+
+  15% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes drawCheckmark {
+  0% {
+    stroke-dashoffset: 28px;
+  }
+
+  15% {
+    stroke-dashoffset: 28px;
+    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
+    animation-timing-function: cubic-bezier(1, 0, 0, 1);
+  }
+
+  55% {
+    stroke-dashoffset: 0px;
+  }
+
+  to {
+    stroke-dashoffset: 0px;
+  }
+}
+
+@keyframes drawCheckmark {
+  0% {
+    stroke-dashoffset: 28px;
+  }
+
+  15% {
+    stroke-dashoffset: 28px;
+    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
+    animation-timing-function: cubic-bezier(1, 0, 0, 1);
+  }
+
+  55% {
+    stroke-dashoffset: 0px;
+  }
+
+  to {
+    stroke-dashoffset: 0px;
+  }
+}
+
+@-webkit-keyframes checkmarkCircleShimmer {
+  0% {
+    -webkit-transform: translate(24px, 24px) rotate(-35deg);
+    transform: translate(24px, 24px) rotate(-35deg);
+  }
+
+  15% {
+    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
+    animation-timing-function: cubic-bezier(1, 0, 0, 1);
+    -webkit-transform: translate(24px, 24px) rotate(-35deg);
+    transform: translate(24px, 24px) rotate(-35deg);
+  }
+
+  75% {
+    -webkit-transform: translate(24px, 24px) rotate(325deg);
+    transform: translate(24px, 24px) rotate(325deg);
+  }
+
+  to {
+    -webkit-transform: translate(24px, 24px) rotate(325deg);
+    transform: translate(24px, 24px) rotate(325deg);
+  }
+}
+
+@keyframes checkmarkCircleShimmer {
+  0% {
+    -webkit-transform: translate(24px, 24px) rotate(-35deg);
+    transform: translate(24px, 24px) rotate(-35deg);
+  }
+
+  15% {
+    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
+    animation-timing-function: cubic-bezier(1, 0, 0, 1);
+    -webkit-transform: translate(24px, 24px) rotate(-35deg);
+    transform: translate(24px, 24px) rotate(-35deg);
+  }
+
+  75% {
+    -webkit-transform: translate(24px, 24px) rotate(325deg);
+    transform: translate(24px, 24px) rotate(325deg);
+  }
+
+  to {
+    -webkit-transform: translate(24px, 24px) rotate(325deg);
+    transform: translate(24px, 24px) rotate(325deg);
+  }
+}
+
+@-webkit-keyframes drawCircle {
+  0% {
+    stroke-dashoffset: 145px;
+  }
+
+  8.35% {
+    stroke-dashoffset: 145px;
+    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
+    animation-timing-function: cubic-bezier(1, 0, 0, 1);
+  }
+
+  38.35% {
+    stroke-dashoffset: 0px;
+  }
+
+  to {
+    stroke-dashoffset: 0px;
+  }
+}
+
+@keyframes drawCircle {
+  0% {
+    stroke-dashoffset: 145px;
+  }
+
+  8.35% {
+    stroke-dashoffset: 145px;
+    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
+    animation-timing-function: cubic-bezier(1, 0, 0, 1);
+  }
+
+  38.35% {
+    stroke-dashoffset: 0px;
+  }
+
+  to {
+    stroke-dashoffset: 0px;
+  }
+}

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}