WIP: Add loading dots spinner

diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index ec8473207eff5c4abc3bc34d4753c9c4c2765602..23a0870b6885957528d49b79d04df7117009d8b4 100644 (file)
--- 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 f2635c63ecf1fbe9811fd2bfc01b3a92fc913adc..f4db522d25708932de47c4df8b6fee0dee10f493 100644 (file)
--- 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.