feat(loader-rails): change the loader animation and fill color

Kajabi · Sep 5, 2024 · 30253da · 30253da
1 parent e809552
commit 30253da
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 24 deletions.
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb
@@ -1,5 +1,6 @@
 <%
   component_description = component.type === "success" ? "Success" : "Loading..."
+  stroke_color = SageTokens::COLOR_PALETTE[:MERCURY_40]
 %>
 
 <div class="
@@ -12,11 +13,25 @@
   aria-busy="true"
   aria-live="polite"
   <%= component.generated_html_attributes.html_safe %>
-> 
+>
   <%# Spinner SVG %>
   <% if component.type === "spinner" %>
-    <svg class="sage-loader__spinner" viewBox="25 25 50 50">
-      <circle class="sage-loader__spinner-path" cx="50" cy="50" r="20" fill="none" stroke="0072EF" stroke-width="2" />
+    <svg class="sage-loader__spinner" viewBox="0 0 200 200" fill="none" color="<%=stroke_color%>">
+      <defs>
+        <linearGradient id="sage-loader__spinner-secondHalf">
+          <stop offset="0%" stop-opacity="0" stop-color="currentColor" />
+          <stop offset="100%" stop-opacity="0.5" stop-color="currentColor" />
+        </linearGradient>
+        <linearGradient id="sage-loader__spinner-firstHalf">
+          <stop offset="0%" stop-opacity="1" stop-color="currentColor" />
+          <stop offset="100%" stop-opacity="0.5" stop-color="currentColor" />
+        </linearGradient>
+      </defs>
+      <g>
+        <path class="sage-loader__spinner-path sage-loader__spinner-secondHalf" d="M 4 100 A 96 96 0 0 1 196 100" />
+        <path class="sage-loader__spinner-path sage-loader__spinner-firstHalf" d="M 196 100 A 96 96 0 0 1 4 100" />
+        <path class="sage-loader__spinner-path sage-loader__spinner-highlight" d="M 4 100 A 96 96 0 0 1 4 98" />
+      </g>
     </svg>
   <% end %>
 

diff --git a/packages/sage-assets/lib/stylesheets/components/_loader.scss b/packages/sage-assets/lib/stylesheets/components/_loader.scss
@@ -11,7 +11,6 @@ $-loader-bar-speed-delay: 0.5s;
 $-loader-bar-width: rem(300px);
 $-loader-spinner-size: rem(48px);
 $-loader-spinner-speed: 2s;
-$-loader-spinner-path-speed: 1.5s;
 $-loader-typing-size: rem(6px);
 $-loader-lower-opacity: 0.4;
 
@@ -84,7 +83,7 @@ $-loader-lower-opacity: 0.4;
 .sage-loader__spinner {
   width: sage-spacing(xl);
   height: sage-spacing(xl);
-  animation: rotate $-loader-spinner-speed linear infinite;
+  animation: loader-rotate $-loader-spinner-speed linear infinite;
 }
 
 .sage-loader__spinner--loading-button {
@@ -94,11 +93,20 @@ $-loader-lower-opacity: 0.4;
 }
 
 .sage-loader__spinner-path {
-  stroke-dasharray: 150, 200;
-  stroke-dashoffset: -10;
+  stroke-width: 8px;
+}
+
+.sage-loader__spinner-secondHalf {
+  stroke: url("#sage-loader__spinner-secondHalf");
+}
+
+.sage-loader__spinner-firstHalf {
+  stroke: url("#sage-loader__spinner-firstHalf");
+}
+
+.sage-loader__spinner-highlight {
+  stroke: currentColor;
   stroke-linecap: round;
-  stroke: sage-color(primary, 300);
-  animation: dash $-loader-spinner-path-speed ease-in-out infinite;
 }
 
 .sage-loader__spinner-path--loading-button {
@@ -146,24 +154,12 @@ $-loader-lower-opacity: 0.4;
   }
 }
 
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes dash {
+@keyframes loader-rotate {
   0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -35;
+    transform: rotate(0deg);
   }
   100% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -124;
+    transform: rotate(360deg);
   }
 }