1 files changed, 315 insertions, 0 deletions
diff --git a/apps/web-shared/src/styles/components/circle-loader.scss b/apps/web-shared/src/styles/components/circle-loader.scss
new file mode 100644
index 0000000..5116d39
--- /dev/null
+++ b/apps/web-shared/src/styles/components/circle-loader.scss
@@ -0,0 +1,315 @@
+@use '../base' as *;
+
+/* --------------------------------
+
+File#: _1_circle-loader
+Title: Circle Loader
+Descr: A collection of animated circle loaders
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+:root {
+  // v1
+  --circle-loader-v1-size: 48px;
+  --circle-loader-v1-stroke-width: 4px;
+
+  // v2
+  --circle-loader-v2-size: 64px;
+  --circle-loader-v2-stroke-width: 2;
+
+  // v3
+  --circle-loader-v3-size: 64px;
+
+  // v4
+  --circle-loader-v4-size: 48px;
+
+  // v5
+  --circle-loader-v5-size: 64px;
+
+  // v6
+  --circle-loader-v6-size: 48px;
+}
+
+.circle-loader {
+  position: relative;
+  display: inline-block;
+}
+
+@supports (animation-name: this) {
+  .circle-loader__label {
+    @include srHide; // show label only to screen readers if animations are supported
+  }
+}
+
+// loader v1 - rotation
+@supports (animation-name: this) {
+  .circle-loader--v1 {
+    transform: rotate(45deg);
+    will-change: transform;
+    animation: circle-loader-1 0.75s infinite var(--ease-in-out);
+
+    .circle-loader__circle {
+      width: var(--circle-loader-v1-size); // loader width
+      height: var(--circle-loader-v1-size); // loader height
+      border-width: var(--circle-loader-v1-stroke-width); // loader stroke width
+      border-style: solid;
+      border-color: alpha(var(--color-primary), 0.2); // loader base color
+      border-radius: 50%;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-width: inherit;
+        border-style: inherit;
+        border-color: transparent;
+        border-top-color: var(--color-primary); // loader fill color
+        border-radius: inherit;
+      }
+    }
+  }
+}
+
+@keyframes circle-loader-1 {
+  0% {
+    transform: rotate(45deg);
+  }
+
+  100% {
+    transform: rotate(405deg);
+  }
+}
+
+// loader v2 - filling
+@supports (animation-name: this) {
+  .circle-loader--v2 {
+    will-change: transform;
+    animation: circle-loader-spinning-main 1.4s infinite linear;
+
+    .circle-loader__svg {
+      display: block;
+      width: var(--circle-loader-v2-size);
+      height: var(--circle-loader-v2-size);
+      color: var(--color-primary); // loader color
+
+      > * {
+        stroke-width: var(--circle-loader-v2-stroke-width); // loader stroke width
+      }
+    }
+
+    .circle-loader__base {
+      opacity: 0.2;
+    }
+
+    .circle-loader__fill {
+      stroke-linecap: round; // optional - remove if you prefer butt caps
+      stroke-dashoffset: 0;
+      stroke-dasharray: 90 120;
+      transform-origin: 50% 50%;
+      transform: rotate(45deg);
+      animation: circle-loader-dash 1.4s infinite;
+    }
+  }
+}
+
+@keyframes circle-loader-dash {
+  0%, 20% {
+    stroke-dashoffset: 0;
+    transform: rotate(0);
+  }
+
+  50%, 70% {
+    stroke-dashoffset: 80;
+    transform: rotate(270deg);
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes circle-loader-spinning-main {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// loader v3 - drop
+@supports (animation-name: this) {
+  .circle-loader--v3 {
+    width: var(--circle-loader-v3-size); // loader width
+    height: var(--circle-loader-v3-size); // loader height
+
+    .circle-loader__circle {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background-color: var(--color-primary); // loader color
+      transform: scale(0);
+      opacity: 0.8;
+      will-change: transform, opacity;
+      animation: circle-loader-3 1.2s infinite;
+    }
+
+    .circle-loader__circle--2nd {
+      animation-delay: 0.6s; // this should be half the duration of animation
+    }
+  }
+}
+
+@keyframes circle-loader-3 {
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+// loader v4 - eclipse
+@supports (animation-name: this) {
+  .circle-loader--v4 {
+    width: var(--circle-loader-v4-size); // loader width
+    height: var(--circle-loader-v4-size); // loader height
+    border-radius: 50%;
+    overflow: hidden;
+
+    .circle-loader__mask,
+    .circle-loader__circle {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+    }
+
+    .circle-loader__mask {
+      clip-path: circle(calc(0.5 * var(--circle-loader-v4-size))); // fix iOS issue - it needs to be = half size of loader
+    }
+
+    .circle-loader__circle--1st {
+      background-color: var(--color-contrast-low); // loader base color
+    }
+
+    .circle-loader__circle--2nd {
+      background-color: var(--color-primary); // loader fill color
+      will-change: transform;
+      transform-origin: 50% 100%;
+      animation: circle-loader-4 1.2s infinite cubic-bezier(.23, .9, .75, .1);
+      transform: translateX(-100%);
+    }
+  }
+}
+
+@keyframes circle-loader-4 {
+  to {
+    transform: translateX(100%);
+  }
+}
+
+// loader v5 - bounce
+@supports (animation-name: this) {
+  .circle-loader--v5 {
+    font-size: var(--circle-loader-v5-size); // loader size - if you edit this value all elements scale accordingly
+    width: 1em;
+    height: 1em;
+
+    .circle-loader__label {
+      font-size: 1rem;
+    }
+
+    .circle-loader__ball {
+      position: absolute;
+      top: 0;
+      left: calc(50% - 0.140625em);
+      width: 0.28125em;
+      height: 0.28125em;
+      background-color: var(--color-primary);
+      border-radius: 50%;
+      animation: circle-loader-5-ball 0.8s infinite;
+    }
+
+    .circle-loader__shadow {
+      position: absolute;
+      bottom: 0;
+      left: calc(50% - 0.15625em);
+      width: 0.3125em;
+      height: 0.3125em;
+      background-color: var(--color-contrast-lower);
+      border-radius: 50%;
+      transform: scaleY(0.4) scaleX(1.2);
+      animation: circle-loader-5-shadow 0.8s infinite;
+    }
+  }
+}
+
+@keyframes circle-loader-5-ball {
+  0% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(.61, .12, .85, .4);
+  }
+
+  50% {
+    transform: translateY(0.5625em);
+    animation-timing-function: cubic-bezier(.12, .59, .46, .95);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes circle-loader-5-shadow {
+  0% {
+    transform: scaleY(0.4) scaleX(1.2);
+    background-color: var(--color-contrast-lower);
+    animation-timing-function: cubic-bezier(.61, .12, .85, .4);
+  }
+
+  50% {
+    transform: scaleY(0.2) scaleX(0.6);
+    background-color: var(--color-contrast-low);
+    animation-timing-function: cubic-bezier(.12, .59, .46, .95);
+  }
+
+  100% {
+    transform: scaleY(0.4) scaleX(1.2);
+    background-color: var(--color-contrast-lower);
+  }
+}
+
+// loader v6 - worm
+@supports (animation-name: this) {
+  .circle-loader--v6 {
+    .circle-loader__svg {
+      display: block;
+      width: var(--circle-loader-v6-size);
+      height: var(--circle-loader-v6-size);
+      color: var(--color-primary); // loader color
+    }
+
+    .circle-loader__fill {
+      stroke-width: 8px; // loader stroke width
+      stroke-dashoffset: 35;
+      stroke-dasharray: 36 36;
+      animation: circle-loader-6 1.5s infinite;
+    }
+  }
+}
+
+@keyframes circle-loader-6 {
+  0%, 100% {
+    stroke-dashoffset: 35;
+  }
+
+  50% {
+    stroke-dashoffset: -35;
+  }
+}