From 61c57c4e4ef7a1372983f19fa4b0d7eeeff4dedc Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 19 Dec 2022 21:39:39 -0800
Subject: [PATCH] WIP: Add loading dots spinner

---
 scss/_spinners.scss                          | 33 ++++++++++++++++++++
 site/content/docs/5.2/components/spinners.md | 26 +++++++++++++++
 2 files changed, 59 insertions(+)

diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index ec8473207e..23a0870b68 100644
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -83,3 +83,36 @@
     }
   }
 }
+
+//
+// Moving dots
+//
+
+// scss-docs-start spinner-dots-keyframes
+@keyframes spinner-dots {
+  0% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: .3;
+  }
+}
+// scss-docs-end spinner-dots-keyframes
+
+.spinner-dots {
+  user-select: none;
+
+  > circle:first-of-type,
+  > circle:nth-of-type(2),
+  > circle:last-of-type {
+    fill: currentcolor;
+    animation: spinner-dots .75s infinite ease-in-out alternate;
+  }
+  > circle:nth-of-type(2) {
+    animation-delay: .25s;
+  }
+  > circle:last-of-type {
+    animation-delay: .5s;
+  }
+}
diff --git a/site/content/docs/5.2/components/spinners.md b/site/content/docs/5.2/components/spinners.md
index f2635c63ec..f4db522d25 100644
--- a/site/content/docs/5.2/components/spinners.md
+++ b/site/content/docs/5.2/components/spinners.md
@@ -66,6 +66,32 @@ Once again, this spinner is built with `currentColor`, so you can easily change
 {{< /spinner.inline >}}
 {{< /example >}}
 
+## Loading dots spinner
+
+The loading dots spinner is a special spinner that's built using an SVG, making it much easier to work style and animate with CSS. Rather than generate pseudo-elements with `::before` and `::after`, we just have one, tiny HTML element.
+
+{{< callout info >}}
+Loading dots should be named `.loading-dots`, but for consistency's sake, we're using `.spinner-dots`.
+{{< /callout >}}
+
+{{< example >}}
+<svg class="spinner-dots" width="32" height="16" role="status" xmlns="http://www.w3.org/2000/svg">
+  <title>Loading...</title><circle cx="4" cy="8" r="4"/><circle cx="16" cy="8" r="4"/><circle cx="28" cy="8" r="4"/>
+</svg>
+{{< /example >}}
+
+And as usual, this spinner is styled with `currentColor`, so text color utilities can be applied.
+
+{{< example >}}
+{{< spinner.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<svg class="spinner-dots text-{{ .name }}" width="32" height="16" role="status" xmlns="http://www.w3.org/2000/svg">
+  <title>Loading...</title><circle cx="4" cy="8" r="4"/><circle cx="16" cy="8" r="4"/><circle cx="28" cy="8" r="4"/>
+</svg>
+{{- end -}}
+{{< /spinner.inline >}}
+{{< /example >}}
+
 ## Alignment
 
 Spinners in Bootstrap are built with `rem`s, `currentColor`, and `display: inline-flex`. This means they can easily be resized, recolored, and quickly aligned.
-- 
2.47.2