diff --git a/themes/lucentui/css/app.css b/themes/lucentui/css/app.css
index b17b0fd12..0c72d4897 100644
--- a/themes/lucentui/css/app.css
+++ b/themes/lucentui/css/app.css
@@ -636,12 +636,12 @@ x-navigation-link svg {
 .loader {
     display: inline-block;
     width: 1em;
-    height: 1em;
+    aspect-ratio: 1;
     border-radius: 50%;
-    border: 2px solid var(--primary, #6366f1);
+    border: 2px solid var(--primary, #514b82);
     animation:
-        loader-clip 0.8s infinite linear alternate,
-        loader-rotate 1.6s infinite linear;
+        l20-1 0.8s infinite linear alternate,
+        l20-2 1.6s infinite linear;
 }
 
 /* Use currentColor variant when inside colored buttons */
@@ -651,16 +651,14 @@ x-navigation-link svg {
 
 .loader-sm {
     width: 0.875em;
-    height: 0.875em;
 }
 
 .loader-lg {
     width: 1.25em;
-    height: 1.25em;
     border-width: 3px;
 }
 
-@keyframes loader-clip {
+@keyframes l20-1 {
     0%    { clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); }
     12.5% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%); }
     25%   { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%); }
@@ -670,7 +668,7 @@ x-navigation-link svg {
     100%  { clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%); }
 }
 
-@keyframes loader-rotate {
+@keyframes l20-2 {
     0%     { transform: scaleY(1) rotate(0deg); }
     49.99% { transform: scaleY(1) rotate(135deg); }
     50%    { transform: scaleY(-1) rotate(0deg); }