diff --git a/docs/app/views/examples/components/loader/_preview.html.erb b/docs/app/views/examples/components/loader/_preview.html.erb
index 8a089ef240..b1eec7fcc9 100644
--- a/docs/app/views/examples/components/loader/_preview.html.erb
+++ b/docs/app/views/examples/components/loader/_preview.html.erb
@@ -1,29 +1,48 @@
-<h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">Without text</h2>
-<div class="sage-row">
-  <div class="sage-col--md-6 example__block--lg">
+<h2>Variants</h2>
+
+<h3>Bar</h3>
+<%= sage_component SageGridRow, {} do %>
+  <%= sage_component SageGridCol, { size: 12, css_classes: "example__block--lg" } do %>
     <%= sage_component SageLoader, {
-      type: "spinner"
+      type: "bar"
     } %>
-  </div>
-  <div class="sage-col--md-6 example__block--lg">
-    <%= sage_component SageLoader, {
-      type: "success"
-    } %>
-  </div>
-</div>
-<hr>
-<h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">With text</h2>
-<div class="sage-row">
-  <div class="sage-col--md-6 example__block--lg">
+  <% end %>
+<% end %>
+
+<%= sage_component SageDivider, {} %>
+
+<h3>Spinner</h3>
+<%= sage_component SageGridRow, {} do %>
+  <%= sage_component SageGridCol, { size: 6, css_classes: "example__block--lg" } do %>
+    <h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">With text</h2>
     <%= sage_component SageLoader, {
       type: "spinner",
       text: true
     } %>
-  </div>
-  <div class="sage-col--md-6 example__block--lg">
+  <% end %>
+  <%= sage_component SageGridCol, { size: 6, css_classes: "example__block--lg" } do %>
+    <h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">Without text</h2>
+    <%= sage_component SageLoader, {
+      type: "spinner"
+    } %>
+  <% end %>
+<% end %>
+
+<%= sage_component SageDivider, {} %>
+
+<h3>Success</h3>
+<%= sage_component SageGridRow, {} do %>
+  <%= sage_component SageGridCol, { size: 6, css_classes: "example__block--lg" } do %>
+    <h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">With text</h2>
     <%= sage_component SageLoader, {
       type: "success",
       text: true
     } %>
-  </div>
-</div>
+  <% end %>
+  <%= sage_component SageGridCol, { size: 6, css_classes: "example__block--lg" } do %>
+    <h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">Without text</h2>
+    <%= sage_component SageLoader, {
+      type: "success"
+    } %>
+  <% end %>
+<% end %>
diff --git a/docs/app/views/examples/components/loader/_props.html.erb b/docs/app/views/examples/components/loader/_props.html.erb
index 141ddb9128..b40d09355a 100644
--- a/docs/app/views/examples/components/loader/_props.html.erb
+++ b/docs/app/views/examples/components/loader/_props.html.erb
@@ -1,12 +1,19 @@
 <tr>
-  <td><%= md('`type`') %><%= sage_component SageBadge, { color: "published", value: "required" } %></td>
-  <td><%= md('Determines which loader will be used; `spinner` or `success`') %></td>
-  <td><%= md('String') %></td>
-  <td><%= md('`nil`') %></td>
+  <td><%= md('`fill`') %>
+  <td><%= md('If true, will fill the space within the container.') %></td>
+  <td><%= md('Boolean') %></td>
+  <td><%= md('`false`') %></td>
 </tr>
 <tr>
   <td><%= md('`text`') %></td>
   <td><%= md('Includes text that aligns with the loader.') %></td>
   <td><%= md('Boolean') %></td>
+  <td><%= md('`false`') %></td>
+</tr>
+<tr>
+  <td><%= md('`type`') %><%= sage_component SageBadge, { color: "published", value: "required" } %></td>
+  <td><%= md('Determines which loader will be used; `bar`, `spinner` or `success`') %></td>
+  <td><%= md('String') %></td>
   <td><%= md('`nil`') %></td>
 </tr>
+