diff --git a/site/docs/4.1/components/spinners.md b/site/docs/4.1/components/spinners.md
index 878c2a7de4..d150670029 100644
--- a/site/docs/4.1/components/spinners.md
+++ b/site/docs/4.1/components/spinners.md
@@ -23,18 +23,13 @@ Use the border spinners for a lightweight loading indicator.
### Colors
-The border spinner uses `currentColor` for its `border-color`, meaning you can customize the color with [text color utilities][color]. Here's the regular border spinner in blue.
+The border spinner uses `currentColor` for its `border-color`, meaning you can customize the color with [text color utilities][color]. You can use any of our text color utilities on the standard spinner.
-
-
-Use any of our text color utilities on the standard spinner.
-
-{% highlight html %}
+{% capture example %}
{% for color in site.data.theme-colors %}
Loading...
{% endfor %}
-{% endhighlight %}
+{% endcapture %}
+{% include example.html content=example %}
{% capture callout %}
**Why not use `border-color` utilities?** Each border spinner specifies a `transparent` border for at least one side, so `.border-{color}` utilities would override that.
@@ -52,14 +47,11 @@ If you don't fancy a border spinner, switch to the grow spinner. While it doesn'
Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities][color]. Here it is in blue, along with the supported variants.
-
-
-{% highlight html %}
+{% capture example %}
{% for color in site.data.theme-colors %}
Loading...
{% endfor %}
-{% endhighlight %}
+{% endcapture %}
+{% include example.html content=example %}
## Alignment