From e9eb26ead55403b351480936de2e0f0a5b11f291 Mon Sep 17 00:00:00 2001
From: GZolla <43836485+GZolla@users.noreply.github.com>
Date: Thu, 15 Jan 2026 15:35:04 -0500
Subject: [PATCH 1/2] fix: make loading-spinner divisible by 6

---
 components/loading-spinner/loading-spinner.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/loading-spinner/loading-spinner.js b/components/loading-spinner/loading-spinner.js
index a606cc90016..98011d6958b 100644
--- a/components/loading-spinner/loading-spinner.js
+++ b/components/loading-spinner/loading-spinner.js
@@ -38,11 +38,11 @@ class LoadingSpinner extends LitElement {
 			}
 
 			.d2l-loading-spinner-wrapper {
-				height: var(--d2l-loading-spinner-size, 50px);
+				height: var(--d2l-loading-spinner-size, 48px);
 				margin: auto;
 				overflow: hidden;
 				position: relative;
-				width: var(--d2l-loading-spinner-size, 50px);
+				width: var(--d2l-loading-spinner-size, 48px);
 			}
 			svg {
 				background: radial-gradient(rgba(0, 0, 0, 0.1), transparent 70%); /* 70% ≈ 100%/sqrt(2) = radius of circle since corners lie on 100% of radial gradient */
@@ -63,7 +63,7 @@ class LoadingSpinner extends LitElement {
 			.inner-circle {
 				fill: none;
 				stroke: var(--d2l-loading-spinner-color, var(--d2l-color-celestine));
-				stroke-width: 2;
+				stroke-width: 3;
 			}
 
 			.slice {
@@ -119,11 +119,11 @@ class LoadingSpinner extends LitElement {
 	render() {
 		return html`
 			<div class="d2l-loading-spinner-wrapper">
-				<svg viewBox="0 0 50 50" fill-rule="evenodd">
+				<svg viewBox="0 0 48 48" fill-rule="evenodd">
 					<g>
-						<circle cx="25" cy="25" r="19" class="outer-circle-stroke"></circle>
-						<circle cx="25" cy="25" r="19" class="outer-circle"></circle>
-						<circle cx="25" cy="25" r="13" class="inner-circle"></circle>
+						<circle cx="24" cy="24" r="18" class="outer-circle-stroke"></circle>
+						<circle cx="24" cy="24" r="18" class="outer-circle"></circle>
+						<circle cx="24" cy="24" r="12" class="inner-circle"></circle>
 					</g>
 					${Array.from({ length: 5 }).map((_, i) => this.#renderSlice(i + 1))}
 				</svg>
@@ -147,8 +147,8 @@ class LoadingSpinner extends LitElement {
 		};
 		classes[`slice-${index}`] = true;
 		return svg`<g class="${classMap(classes)}">
-			<path d="M39 25h5a19 19 0 0 0 -19 -19v5a 1 1 0 0 1 0 2v12h12a1 1 0 0 1 2 0z" fill="#FFF"></path>
-			<path d="M25 13a1 1 0 0 0 0 -2a14 14 0 0 1 14 14a1 1 0 0 0 -2 0a12 12 0 0 0 -12 -12z" fill="#E6EAF0"></path>
+			<path d="M37.5 24h4.5a18 18 0 0 0 -18 -18v4.5a 1.5 1.5 0 0 1 0 3v10.5h10.5a1.5 1.5 0 0 1 3 0z" fill="#FFF"></path>
+			<path d="M24 13.5a1.5 1.5 0 0 0 0 -3a13.5 13.5 0 0 1 13.5 13.5a1.5 1.5 0 0 0 -3 0a10.5 10.5 0 0 0 -10.5 -10.5z" fill="#E6EAF0"></path>
 		</g>`;
 	}
 

From ef8153b0a9024223b647d1e1a30be7214b4d78dc Mon Sep 17 00:00:00 2001
From: GZolla <43836485+GZolla@users.noreply.github.com>
Date: Thu, 15 Jan 2026 18:09:09 -0500
Subject: [PATCH 2/2] Iron out

---
 components/loading-spinner/loading-spinner.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/loading-spinner/loading-spinner.js b/components/loading-spinner/loading-spinner.js
index 98011d6958b..29630b64d92 100644
--- a/components/loading-spinner/loading-spinner.js
+++ b/components/loading-spinner/loading-spinner.js
@@ -121,9 +121,9 @@ class LoadingSpinner extends LitElement {
 			<div class="d2l-loading-spinner-wrapper">
 				<svg viewBox="0 0 48 48" fill-rule="evenodd">
 					<g>
-						<circle cx="24" cy="24" r="18" class="outer-circle-stroke"></circle>
-						<circle cx="24" cy="24" r="18" class="outer-circle"></circle>
-						<circle cx="24" cy="24" r="12" class="inner-circle"></circle>
+						<circle cx="24" cy="24" r="21" class="outer-circle-stroke"></circle>
+						<circle cx="24" cy="24" r="21" class="outer-circle"></circle>
+						<circle cx="24" cy="24" r="13.5" class="inner-circle"></circle>
 					</g>
 					${Array.from({ length: 5 }).map((_, i) => this.#renderSlice(i + 1))}
 				</svg>
@@ -147,8 +147,8 @@ class LoadingSpinner extends LitElement {
 		};
 		classes[`slice-${index}`] = true;
 		return svg`<g class="${classMap(classes)}">
-			<path d="M37.5 24h4.5a18 18 0 0 0 -18 -18v4.5a 1.5 1.5 0 0 1 0 3v10.5h10.5a1.5 1.5 0 0 1 3 0z" fill="#FFF"></path>
-			<path d="M24 13.5a1.5 1.5 0 0 0 0 -3a13.5 13.5 0 0 1 13.5 13.5a1.5 1.5 0 0 0 -3 0a10.5 10.5 0 0 0 -10.5 -10.5z" fill="#E6EAF0"></path>
+			<path d="M39 24h6a21 21 0 0 0 -21 -21v6a 1.5 1.5 0 0 1 0 3v12h12a1.5 1.5 0 0 1 3 0z" fill="#FFF"></path>
+			<path d="M39 24a15 15 0 0 0 -15 -15a1.5 1.5 0 0 1 0 3a12 12 0 0 1 12 12a1.5 1.5 0 0 1 3 0z" fill="#E6EAF0"></path>
 		</g>`;
 	}