feature(loader): change loader to new behavior and colors (#1975)

* feat(loader-rails): change the loader animation and fill color * feat(loader-react): change the loader animation and fill color * style(loader): change timing to 1.5s per convo with design team --------- Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>
Kajabi · Sep 6, 2024 · a3c01c0 · a3c01c0
1 parent db71f66
commit a3c01c0
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 45 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
@@ -10,8 +10,7 @@ $-loader-bar-speed: 1.2s;
 $-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-spinner-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);
   }
 }
 

diff --git a/packages/sage-react/lib/Loader/Loader.jsx b/packages/sage-react/lib/Loader/Loader.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { LOADER_TYPES } from './configs';
+import { SageTokens } from '../configs';
 
 export const Loader = ({
   fillSpace,
@@ -33,34 +34,51 @@ export const Loader = ({
       {(type === LOADER_TYPES.SPINNER_IN_BUTTON) && (
         <svg
           className="sage-loader__spinner sage-loader__spinner--loading-button"
-          viewBox="25 25 50 50"
+          viewBox="0 0 200 200"
+          fill="none"
+          color={SageTokens.COLOR_PALETTE.MERCURY_40}
           aria-hidden="true"
         >
-          <circle
-            className="sage-loader__spinner-path sage-loader__spinner-path--loading-button"
-            cx="50"
-            cy="50"
-            r="20"
-            fill="none"
-            stroke="0072EF"
-            strokeWidth="4"
-          />
+          <defs>
+            <linearGradient id="sage-loader__spinner-secondHalf">
+              <stop offset="0%" stopOpacity="0" stopColor="currentColor" />
+              <stop offset="100%" stopOpacity="0.5" stopColor="currentColor" />
+            </linearGradient>
+            <linearGradient id="sage-loader__spinner-firstHalf">
+              <stop offset="0%" stopOpacity="1" stopColor="currentColor" />
+              <stop offset="100%" stopOpacity="0.5" stopColor="currentColor" />
+            </linearGradient>
+          </defs>
+          <g>
+            <path className="sage-loader__spinner-path sage-loader__spinner--loading-button sage-loader__spinner-secondHalf" d="M 4 100 A 96 96 0 0 1 196 100" />
+            <path className="sage-loader__spinner-path sage-loader__spinner--loading-button sage-loader__spinner-firstHalf" d="M 196 100 A 96 96 0 0 1 4 100" />
+            <path className="sage-loader__spinner-path sage-loader__spinner--loading-button sage-loader__spinner-highlight" d="M 4 100 A 96 96 0 0 1 4 98" />
+          </g>
         </svg>
       )}
       {(type === LOADER_TYPES.SPINNER) && (
         <svg
           className="sage-loader__spinner"
-          viewBox="25 25 50 50"
+          viewBox="0 0 200 200"
+          fill="none"
+          color={SageTokens.COLOR_PALETTE.MERCURY_40}
+          aria-hidden="true"
         >
-          <circle
-            className="sage-loader__spinner-path"
-            cx="50"
-            cy="50"
-            r="20"
-            fill="none"
-            stroke="0072EF"
-            strokeWidth="2"
-          />
+          <defs>
+            <linearGradient id="sage-loader__spinner-secondHalf">
+              <stop offset="0%" stopOpacity="0" stopColor="currentColor" />
+              <stop offset="100%" stopOpacity="0.5" stopColor="currentColor" />
+            </linearGradient>
+            <linearGradient id="sage-loader__spinner-firstHalf">
+              <stop offset="0%" stopOpacity="1" stopColor="currentColor" />
+              <stop offset="100%" stopOpacity="0.5" stopColor="currentColor" />
+            </linearGradient>
+          </defs>
+          <g>
+            <path className="sage-loader__spinner-path sage-loader__spinner-secondHalf" d="M 4 100 A 96 96 0 0 1 196 100" />
+            <path className="sage-loader__spinner-path sage-loader__spinner-firstHalf" d="M 196 100 A 96 96 0 0 1 4 100" />
+            <path className="sage-loader__spinner-path sage-loader__spinner-highlight" d="M 4 100 A 96 96 0 0 1 4 98" />
+          </g>
         </svg>
       )}
       {(type === LOADER_TYPES.SUCCESS) && (