From 0778b1d1f83a6152d268fec6023fcecb2294d935 Mon Sep 17 00:00:00 2001
From: Julian Skinner <dev+github-bot@kajabi.com>
Date: Mon, 30 Sep 2024 15:31:07 -0500
Subject: [PATCH] fix(button): loading button wasn't animating, updated svg in
 button-spinner.js

---
 packages/sage-system/lib/button-spinner.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/sage-system/lib/button-spinner.js b/packages/sage-system/lib/button-spinner.js
index 656885fc58..5f49c879e2 100644
--- a/packages/sage-system/lib/button-spinner.js
+++ b/packages/sage-system/lib/button-spinner.js
@@ -4,7 +4,23 @@ Sage.buttonSpinner = (function () {
   // ==================================================
 
   const SELECTOR_BUTTON_SPINNER_ON_SUBMIT = "data-js-sage-spinner-on-submit"
-  const BUTTON_LOADING_SPINNER = `<svg class='sage-loader__spinner sage-loader__spinner--loading-button' viewBox='25 25 50 50' aria-hidden='true'><circle class='sage-loader__spinner-path sage-loader__spinner-path--loading-button' cx='50' cy='50' r='20' fill='none' stroke='0072EF' stroke-width='4'></circle></svg>`;
+  const BUTTON_LOADING_SPINNER = `<svg class="sage-loader__spinner sage-loader__spinner--loading-button" viewBox="0 0 200 200" fill="none">
+      <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>`;
 
   const ATTRIBUTE_ARIA_LABEL = 'aria-label';
   const ATTRIBUTE_ARIA_BUSY = 'aria-busy';