diff --git a/web/images/loading-dark.svg b/web/images/loading-dark.svg
deleted file mode 100644
index fa5269b1a396d..0000000000000
--- a/web/images/loading-dark.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"
-fill="rgba(255,255,255,1)" style="animation:spinLoadingIcon 1s steps(12,end)
-infinite"><style>@keyframes
-spinLoadingIcon{to{transform:rotate(360deg)}}</style><path
-d="M7 3V1s0-1 1-1 1 1 1 1v2s0 1-1 1-1-1-1-1z"/><path d="M4.63
-4.1l-1-1.73S3.13 1.5 4 1c.87-.5 1.37.37 1.37.37l1 1.73s.5.87-.37
-1.37c-.87.57-1.37-.37-1.37-.37z" fill-opacity=".93"/><path
-d="M3.1 6.37l-1.73-1S.5 4.87 1 4c.5-.87 1.37-.37 1.37-.37l1.73 1s.87.5.37
-1.37c-.5.87-1.37.37-1.37.37z" fill-opacity=".86"/><path d="M3
-9H1S0 9 0 8s1-1 1-1h2s1 0 1 1-1 1-1 1z" fill-opacity=".79"/><path d="M4.1 11.37l-1.73 1S1.5 12.87 1
-12c-.5-.87.37-1.37.37-1.37l1.73-1s.87-.5 1.37.37c.5.87-.37 1.37-.37 1.37z"
-fill-opacity=".72"/><path d="M3.63 13.56l1-1.73s.5-.87
-1.37-.37c.87.5.37 1.37.37 1.37l-1 1.73s-.5.87-1.37.37c-.87-.5-.37-1.37-.37-1.37z"
-fill-opacity=".65"/><path d="M7 15v-2s0-1 1-1 1 1 1 1v2s0 1-1
-1-1-1-1-1z" fill-opacity=".58"/><path d="M10.63
-14.56l-1-1.73s-.5-.87.37-1.37c.87-.5 1.37.37 1.37.37l1 1.73s.5.87-.37
-1.37c-.87.5-1.37-.37-1.37-.37z" fill-opacity=".51"/><path
-d="M13.56 12.37l-1.73-1s-.87-.5-.37-1.37c.5-.87 1.37-.37 1.37-.37l1.73 1s.87.5.37
-1.37c-.5.87-1.37.37-1.37.37z" fill-opacity=".44"/><path d="M15
-9h-2s-1 0-1-1 1-1 1-1h2s1 0 1 1-1 1-1 1z" fill-opacity=".37"/><path d="M14.56 5.37l-1.73
-1s-.87.5-1.37-.37c-.5-.87.37-1.37.37-1.37l1.73-1s.87-.5 1.37.37c.5.87-.37 1.37-.37
-1.37z" fill-opacity=".3"/><path d="M9.64 3.1l.98-1.66s.5-.874
-1.37-.37c.87.5.37 1.37.37 1.37l-1 1.73s-.5.87-1.37.37c-.87-.5-.37-1.37-.37-1.37z"
-fill-opacity=".23"/></svg>
\ No newline at end of file
diff --git a/web/toolbar.js b/web/toolbar.js
index 3d33cdce75876..30b80e688ea72 100644
--- a/web/toolbar.js
+++ b/web/toolbar.js
@@ -22,8 +22,6 @@ import {
   toggleCheckedBtn,
 } from "./ui_utils.js";
 
-const PAGE_NUMBER_LOADING_INDICATOR = "visiblePageIsLoading";
-
 /**
  * @typedef {Object} ToolbarOptions
  * @property {HTMLDivElement} container - Container for the secondary toolbar.
@@ -300,7 +298,7 @@ class Toolbar {
   updateLoadingIndicatorState(loading = false) {
     const { pageNumber } = this.items;
 
-    pageNumber.classList.toggle(PAGE_NUMBER_LOADING_INDICATOR, loading);
+    pageNumber.classList.toggle("loading", loading);
   }
 }
 
diff --git a/web/viewer.css b/web/viewer.css
index 3594483f9a087..b271e9802ae55 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -168,11 +168,6 @@
     --doorhanger-separator-color: rgb(92 92 97);
     --dialog-button-bg-color: rgb(92 92 97);
     --dialog-button-hover-bg-color: rgb(115 115 115);
-
-    /* This image is used in <input> elements, which unfortunately means that
-     * the `mask-image` approach used with all of the other images doesn't work
-     * here; hence why we still have two versions of this particular image. */
-    --loading-icon: url(images/loading-dark.svg);
   }
 }
 
@@ -494,22 +489,21 @@ body {
 
 #findInput {
   width: 200px;
-}
-/*#if !MOZCENTRAL*/
-#findInput::-webkit-input-placeholder {
-  color: rgb(191 191 191);
-}
-/*#endif*/
-#findInput::placeholder {
-  font-style: normal;
-}
-#findInput[data-status="pending"] {
-  background-image: var(--loading-icon);
-  background-repeat: no-repeat;
-  background-position: calc(50% + 48% * var(--dir-factor));
-}
-#findInput[data-status="notFound"] {
-  background-color: rgb(255 102 102);
+
+  /*#if !MOZCENTRAL*/
+  &::-webkit-input-placeholder {
+    color: rgb(191 191 191);
+  }
+  /*#endif*/
+  &::placeholder {
+    font-style: normal;
+  }
+  .loadingInput:has(> &[data-status="pending"])::after {
+    visibility: visible;
+  }
+  &[data-status="notFound"] {
+    background-color: rgb(255 102 102);
+  }
 }
 
 .secondaryToolbar,
@@ -1100,22 +1094,42 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
   width: 40px;
   background-size: 0 0;
   transition-property: none;
+
+  /*#if !MOZCENTRAL*/
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+  /*#endif*/
+
+  .loadingInput:has(> &.loading)::after {
+    visibility: visible;
+
+    transition-property: visibility;
+    transition-delay: var(--loading-icon-delay);
+  }
 }
-#pageNumber.visiblePageIsLoading {
-  background-image: var(--loading-icon);
-  background-repeat: no-repeat;
-  background-position: calc(50% - 42% * var(--dir-factor));
-  background-size: 16px 16px;
-  /* Using a delay with background-image doesn't work,
-     consequently we use background-size. */
-  transition-property: background-size;
-  transition-delay: var(--loading-icon-delay);
-}
-/*#if !MOZCENTRAL*/
-#pageNumber::-webkit-inner-spin-button {
-  -webkit-appearance: none;
+
+.loadingInput {
+  &::after {
+    position: absolute;
+    visibility: hidden;
+    top: calc(50% - 8px);
+    width: 16px;
+    height: 16px;
+
+    content: "";
+    background-color: var(--toolbar-icon-bg-color);
+    mask-size: cover;
+    mask-image: var(--loading-icon);
+  }
+
+  &.start::after {
+    inset-inline-start: 4px;
+  }
+  &.end::after {
+    inset-inline-end: 4px;
+  }
 }
-/*#endif*/
 
 .toolbarField:focus {
   border-color: #0a84ff;
diff --git a/web/viewer.html b/web/viewer.html
index 32bf487caf071..c9acfd416c904 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -138,7 +138,9 @@
       <div id="mainContainer">
         <div class="findbar hidden doorHanger" id="findbar">
           <div id="findbarInputContainer">
-            <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91" data-l10n-id="pdfjs-find-input" aria-invalid="false">
+            <span class="loadingInput end">
+              <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91" data-l10n-id="pdfjs-find-input" aria-invalid="false">
+            </span>
             <div class="splitToolbarButton">
               <button id="findPrevious" class="toolbarButton" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="pdfjs-find-previous-button">
                 <span data-l10n-id="pdfjs-find-previous-button-label">Previous</span>
@@ -325,7 +327,9 @@
                     <span data-l10n-id="pdfjs-next-button-label">Next</span>
                   </button>
                 </div>
-                <input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" min="1" tabindex="15" data-l10n-id="pdfjs-page-input" autocomplete="off">
+                <span class="loadingInput start">
+                  <input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" min="1" tabindex="15" data-l10n-id="pdfjs-page-input" autocomplete="off">
+                </span>
                 <span id="numPages" class="toolbarLabel"></span>
               </div>
               <div id="toolbarViewerRight">