feat(spinner): add <ChaseSpinner /> component

.changeset/clean-emus-compete.md

@@ -0,0 +1,5 @@
+---
+"@hrc/spinner": minor
+---
+
+Add `<ChaseSpinner />` component

packages/spinner/lib/ChaseSpinner/index.tsx

@@ -0,0 +1,15 @@
+import { SpinnerBase, SpinnerProps } from "../SpinnerBase";
+import "./style.scss";
+
+export const ChaseSpinner = (props: SpinnerProps): JSX.Element => {
+  return (
+    <SpinnerBase {...props} name="chase-spinner">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </SpinnerBase>
+  );
+};

packages/spinner/lib/ChaseSpinner/style.scss

@@ -0,0 +1,81 @@
+// Taken and adapted from:
+// https://github.com/tobiasahlin/SpinKit/blob/master/spinkit.css#L73
+@use "@scss" as * with (
+  $speed: 2.75s
+);
+
+.chase-spinner.spinner {
+  --_speed: #{$spinner-speed};
+
+  position: relative;
+  animation: chase-spinner var(--_speed) linear both infinite;
+
+  @include speed-variants();
+
+  div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    aspect-ratio: 1;
+    animation: chase-spinner-dot calc(var(--_speed) * 0.8) ease-in-out infinite
+      both;
+
+    &:before {
+      content: "";
+      display: block;
+      width: 25%;
+      aspect-ratio: 1;
+      background-color: var(--_color);
+      border-radius: 100%;
+      animation: chase-spinner-dot-before calc(var(--_speed) * 0.8) ease-in-out
+        infinite both;
+    }
+
+    &:nth-child(1),
+    &:nth-child(1):before {
+      animation-delay: calc(var(--_speed) / -2.2727272727);
+    }
+    &:nth-child(2),
+    &:nth-child(2):before {
+      animation-delay: calc(var(--_speed) / -2.5);
+    }
+    &:nth-child(3),
+    &:nth-child(3):before {
+      animation-delay: calc(var(--_speed) / -2.7777777777);
+    }
+    &:nth-child(4),
+    &:nth-child(4):before {
+      animation-delay: calc(var(--_speed) / -3.125);
+    }
+    &:nth-child(5),
+    &:nth-child(5):before {
+      animation-delay: calc(var(--_speed) / -3.5714285714);
+    }
+    &:nth-child(6),
+    &:nth-child(6):before {
+      animation-delay: calc(var(--_speed) / -4.1666666667);
+    }
+  }
+}
+
+@keyframes chase-spinner {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes chase-spinner-dot {
+  80%,
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes chase-spinner-dot-before {
+  50% {
+    transform: scale(0.4);
+  }
+  100%,
+  0% {
+    transform: scale(1);
+  }
+}

packages/spinner/lib/main.ts

@@ -2,6 +2,7 @@ export { BarsBounceSpinner } from "./BarsBounceSpinner";
 export { BarsBounce2Spinner } from "./BarsBounce2Spinner";
 export { BladeSpinner } from "./BladeSpinner";
 export { BorderSpinner } from "./BorderSpinner";
+export { ChaseSpinner } from "./ChaseSpinner";
 export { CircleSpinner } from "./CircleSpinner";
 export { DualRingSpinner } from "./DualRingSpinner";
 export { EllipsisSpinner } from "./EllipsisSpinner";