diff --git a/docs/content/components/loaders.md b/docs/content/components/loaders.md
index 58de132d..d9000eb8 100644
--- a/docs/content/components/loaders.md
+++ b/docs/content/components/loaders.md
@@ -8,12 +8,19 @@ bundle: loaders
 
 Loaders inform users that an action is still in progress and might take a while to complete.
 
-## Animated ellipsis
-
-The `.animated-ellipsis` can be used for any kind of text to add an animated ellipsis.
+## Animated Ellipsis
 
+Add an animated ellipsis at the end of text with `<span class="AnimatedEllipsis"></span>`.
 
 ```html live
-<span>Loading</span>
-<span class="animated-ellipsis-container"><span class="animated-ellipsis">...</span></span>
+<span>Loading</span><span class="AnimatedEllipsis"></span>
+```
+
+It can also be used in combination with other components.
+
+```html live
+<h2><span>Loading</span><span class="AnimatedEllipsis"></span></h2>
+<span class="branch-name mt-2"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
+<span class="Label bg-blue mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
+<button class="btn mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></button>
 ```
diff --git a/src/loaders/loaders.scss b/src/loaders/loaders.scss
index c80497ee..7903e0a1 100644
--- a/src/loaders/loaders.scss
+++ b/src/loaders/loaders.scss
@@ -2,30 +2,18 @@
 
 // Animated Ellipsis
 
-.animated-ellipsis-container {
+.AnimatedEllipsis {
   display: inline-block;
-  width: 12px;
-  height: 12px;
-  // TODO@14.0.0: Remove `overflow: visible`. Used to override styleguide.css
-  overflow: visible;
-  transform: translateZ(0);
+  overflow: hidden;
+  vertical-align: bottom;
 
-  > .animated-ellipsis {
+  &::after {
+    content: "...";
     display: inline-block;
-    overflow: hidden;
-    vertical-align: bottom;
-    animation: ellipsis 1s infinite;
+    animation: AnimatedEllipsis-keyframes 1.2s steps(4,jump-none) infinite;
+  }
+
+  @keyframes AnimatedEllipsis-keyframes {
+    0% { transform: translateX(-100%); }
   }
 }
-
-@keyframes ellipsis {
-  from { width: 2px; }
-
-  to { width: 12px; }
-}
-
-.large-loading-area {
-  // stylelint-disable-next-line primer/variables
-  padding: 100px 0;
-  text-align: center;
-}