diff --git a/packages/stacks-classic/lib/components/loader/loader.less b/packages/stacks-classic/lib/components/loader/loader.less
index 6faf984997..7f5b8665cd 100644
--- a/packages/stacks-classic/lib/components/loader/loader.less
+++ b/packages/stacks-classic/lib/components/loader/loader.less
@@ -15,20 +15,30 @@
         --_ld-size: var(--su8);
     }
 
-    // CHILD ELEMENTS
-    & &--block,
+    // CHILD ELEMENTS – three blocks via pseudo-elements (::before, --sr-text::before, ::after)
     &:before,
+    & &--sr-text:before,
     &:after {
         background-color: currentColor;
         content: "";
         display: block;
         height: var(--_ld-size);
         width: var(--_ld-size);
-        
+
         animation: loader-animation .8s cubic-bezier(1, 1, 0, 1) infinite;
     }
 
-    & &--block {
+    & &--sr-text {
+        // Visible flex item so its ::before (middle block) shows; overflow visible so translateY isn't clipped
+        display: block;
+        flex-shrink: 0;
+        height: var(--_ld-size);
+        width: var(--_ld-size);
+        font-size: 0;
+        overflow: visible;
+    }
+
+    & &--sr-text:before {
         animation-delay: .25s;
     }
 
@@ -43,8 +53,8 @@
 
 @media (prefers-reduced-motion:reduce){
     .s-loader {
-        & &--block,
         &:before,
+        & &--sr-text:before,
         &:after {
             animation: loader-animation-reduced-motion 2s ease-in-out infinite;
         }
diff --git a/packages/stacks-docs/_data/loader.json b/packages/stacks-docs/_data/loader.json
index 0c37314c0e..05abfa09a8 100644
--- a/packages/stacks-docs/_data/loader.json
+++ b/packages/stacks-docs/_data/loader.json
@@ -1,25 +1,25 @@
 {
-  "classes": [
-    {
-      "class": ".s-loader",
-      "applies": "N/A",
-      "description": "Base class for the loader component"
-    },
-    {
-      "class": ".s-loader--block",
-      "applies": ".s-loader",
-      "description": "Child necessary to render the center loader block"
-    },
-    {
-      "class": ".s-loader__sm",
-      "applies": ".s-loader",
-      "description": "A small variant of the loader component"
-    },
-    {
-      "class": ".s-loader__lg",
-      "applies": ".s-loader",
-      "description": "A large variant of the loader component"
-    }
-  ],
-  "sizes": ["s-loader__sm", "", "s-loader__lg"]
+    "classes": [
+        {
+            "class": ".s-loader",
+            "applies": "N/A",
+            "description": "Base class for the loader component"
+        },
+        {
+            "class": ".s-loader--sr-text",
+            "applies": ".s-loader",
+            "description": "Child necessary to render the center loader block and renders the accessible text"
+        },
+        {
+            "class": ".s-loader__sm",
+            "applies": ".s-loader",
+            "description": "A small variant of the loader component"
+        },
+        {
+            "class": ".s-loader__lg",
+            "applies": ".s-loader",
+            "description": "A large variant of the loader component"
+        }
+    ],
+    "sizes": ["s-loader__sm", "", "s-loader__lg"]
 }
diff --git a/packages/stacks-docs/product/components/buttons.html b/packages/stacks-docs/product/components/buttons.html
index 73ec2cdc65..b793edeaa0 100644
--- a/packages/stacks-docs/product/components/buttons.html
+++ b/packages/stacks-docs/product/components/buttons.html
@@ -273,8 +273,7 @@
 {% highlight html %}
 <button class="s-btn" type="button">
     <div class="s-loader s-loader__sm">
-        <div class="s-loader--block"></div>
-        <div class="v-visible-sr">Loading…</div>
+        <div class="s-loader--sr-text">Loading…</div>
     </div>
     Ask question
 </button>
@@ -309,22 +308,19 @@
                                 </td>
                                 <td class="va-middle ta-center px4"><button class="ws-nowrap s-btn {{ btn.variant }} {{ btn.modifier }}" type="button">
                                     <div class="s-loader s-loader__sm">
-                                        <div class="s-loader--block"></div>
-                                        <div class="v-visible-sr">Loading…</div>
+                                        <div class="s-loader--sr-text">Loading…</div>
                                     </div>
                                     Ask question
                                 </button></td>
                                 <td class="va-middle ta-center px4"><button class="ws-nowrap s-btn {{ btn.variant }} {{ btn.modifier }} is-selected" type="button" aria-pressed="true">
                                     <div class="s-loader s-loader__sm">
-                                        <div class="s-loader--block"></div>
-                                        <div class="v-visible-sr">Loading…</div>
+                                        <div class="s-loader--sr-text">Loading…</div>
                                     </div>
                                     Ask question
                                 </button></td>
                                 <td class="va-middle ta-center px4"><button class="ws-nowrap s-btn {{ btn.variant }} {{ btn.modifier }}" type="button" disabled>
                                     <div class="s-loader s-loader__sm">
-                                        <div class="s-loader--block"></div>
-                                        <div class="v-visible-sr">Loading…</div>
+                                        <div class="s-loader--sr-text">Loading…</div>
                                     </div>
                                     Ask question
                                 </button></td>
diff --git a/packages/stacks-docs/product/components/loader.html b/packages/stacks-docs/product/components/loader.html
index b6bca8c51f..bcb18cbc75 100644
--- a/packages/stacks-docs/product/components/loader.html
+++ b/packages/stacks-docs/product/components/loader.html
@@ -5,6 +5,7 @@
 description: "The loader component indicates an active wait state for a page, section, or interactive element."
 tags: components
 ---
+
 <section class="docs-section">
     {% header "h2", "Classes" %}
     <div class="overflow-x-auto mb32" tabindex="0">
@@ -18,32 +19,41 @@
             </thead>
             <tbody class="fs-caption">
                 {% for item in loader.classes %}
-                    <tr>
-                        <td><code class="docs-code ws-nowrap">{{ item.class }}</code></td>
-                        <td>{% if item.applies == "N/A" %}<em class="fc-black-350">{{ item.applies }}</em>{% else %}<code class="docs-code">{{ item.applies }}</code>{% endif %}</td>
-                        <td>{{ item.description }}</td>
-                    </tr>
+                <tr>
+                    <td>
+                        <code class="docs-code ws-nowrap"
+                            >{{ item.class }}</code
+                        >
+                    </td>
+                    <td>
+                        {% if item.applies == "N/A" %}<em class="fc-black-350"
+                            >{{ item.applies }}</em
+                        >{% else %}<code class="docs-code"
+                            >{{ item.applies }}</code
+                        >{% endif %}
+                    </td>
+                    <td>{{ item.description }}</td>
+                </tr>
                 {% endfor %}
             </tbody>
         </table>
     </div>
 </section>
 <section class="docs-section">
-    {% header "h2", "Examples" %}
-    {% header "h3", "Base" %}
-    <p class="docs-copy">The base loader component displays three animated squares.</p>
+    {% header "h2", "Examples" %} {% header "h3", "Base" %}
+    <p class="docs-copy">
+        The base loader component displays three animated squares.
+    </p>
     <div class="docs-preview">
-{% highlight html %}
-<div class="s-loader">
-    <div class="s-loader--block"></div>
-    <div class="v-visible-sr">Loading…</div>
-</div>
-{% endhighlight %}
+        {% highlight html %}
+        <div class="s-loader">
+            <div class="s-loader--sr-text">Loading…</div>
+        </div>
+        {% endhighlight %}
         <div class="docs-preview--example">
             <div class="d-flex g16 fw-wrap ai-center">
                 <div class="s-loader">
-                    <div class="s-loader--block"></div>
-                    <div class="v-visible-sr">Loading…</div>
+                    <div class="s-loader--sr-text">Loading…</div>
                 </div>
             </div>
         </div>
@@ -62,33 +72,27 @@
         </thead>
         <tbody class="fs-caption">
             {% for size in loader.sizes %}
-                <tr>
-                    <th scope="row">
-                        <code class="docs-code">
-                            {% if size == "" %}
-                                .s-loader
-                            {% else %}
-                                .{{ size }}
-                            {% endif %}
-                        </code>
-                    </th>
-                    <td>
-                        <code class="docs-code bg-white">
-                            {% if size == "" %}
-                                <em class="fc-black-400">N/A</em>
-                            {% else %}
-                                .s-loader
-                            {% endif %}
-                        </code>
-                    </td>
-                    <td class="p8">
-                        <div class="s-loader {{ size }}">
-                            <div class="s-loader--block"></div>
-                            <div class="v-visible-sr">Loading…</div>
-                        </div>
-                    </td>
-                </tr>
+            <tr>
+                <th scope="row">
+                    <code class="docs-code">
+                        {% if size == "" %} .s-loader {% else %} .{{ size }} {%
+                        endif %}
+                    </code>
+                </th>
+                <td>
+                    <code class="docs-code bg-white">
+                        {% if size == "" %}
+                        <em class="fc-black-400">N/A</em>
+                        {% else %} .s-loader {% endif %}
+                    </code>
+                </td>
+                <td class="p8">
+                    <div class="s-loader {{ size }}">
+                        <div class="s-loader--sr-text">Loading…</div>
+                    </div>
+                </td>
+            </tr>
             {% endfor %}
         </tbody>
     </table>
-</section>
\ No newline at end of file
+</section>
diff --git a/packages/stacks-svelte/src/components/Loader/Loader.svelte b/packages/stacks-svelte/src/components/Loader/Loader.svelte
index d0447e26b3..f9a804232d 100644
--- a/packages/stacks-svelte/src/components/Loader/Loader.svelte
+++ b/packages/stacks-svelte/src/components/Loader/Loader.svelte
@@ -31,6 +31,5 @@
 </script>
 
 <div class={classes}>
-    <div class="s-loader--block"></div>
-    <div class="v-visible-sr">{label}</div>
+    <div class="s-loader--sr-text">{label}</div>
 </div>