diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index 87eb6a75cf071..b112a40c2777e 100644
--- a/web_src/css/modules/animations.css
+++ b/web_src/css/modules/animations.css
@@ -1,27 +1,24 @@
 @keyframes isloadingspin {
-  0% { transform: translate(-50%, -50%) rotate(0deg); }
-  100% { transform: translate(-50%, -50%) rotate(360deg); }
+  0% { transform: rotate(0deg); }
+  100% { transform:  rotate(360deg); }
 }
 
 .is-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   pointer-events: none !important;
-  position: relative !important;
   overflow: hidden !important;
 }
 
 .is-loading > * {
   opacity: 0.3;
 }
-
+/* Using `height` and `aspect-ratio` together in Safari can cause issues. The same problem can be seen in the WebKit bug:https://bugs.webkit.org/show_bug.cgi?id=267625, but it can be avoided by not using absolute positioning on `::after`. */
 .is-loading::after {
   content: "";
-  position: absolute;
-  display: block;
-  left: 50%;
-  top: 50%;
   height: min(4em, 66.6%);
   aspect-ratio: 1;
-  transform: translate(-50%, -50%);
   animation: isloadingspin 1000ms infinite linear;
   border-width: 4px;
   border-style: solid;
@@ -61,7 +58,6 @@ form.single-button-form.is-loading .button {
 code.language-math.is-loading::after {
   padding: 0;
   border-width: 2px;
-  width: 1.25rem;
   height: 1.25rem;
 }