diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
index 02bd6e2319..a24531e3f0 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
@@ -2643,11 +2643,14 @@ exports[`Blocks Card > should disable the \`Show More\` button is the card is in
     </button>
   </header>
    
-  <p
-    class="data-card__loading-notice"
+  <div
+    class="dusk-progress-bar data-card__progress-bar"
+    role="progressbar"
   >
-    Loading...
-  </p>
+    <div
+      class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
+    />
+  </div>
   
    
 </div>
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/DataCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/DataCard.spec.js.snap
index 88631c2c95..2d89e5dd50 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/DataCard.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/DataCard.spec.js.snap
@@ -162,11 +162,14 @@ exports[`DataCard > should render the \`DataCard\` in the loading state 1`] = `
     </button>
   </header>
    
-  <p
-    class="data-card__loading-notice"
+  <div
+    class="dusk-progress-bar data-card__progress-bar"
+    role="progressbar"
   >
-    Loading...
-  </p>
+    <div
+      class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
+    />
+  </div>
   
    
 </div>
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap
index 61f813efca..e3b9268b10 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap
@@ -27,11 +27,14 @@ exports[`Transactions Card > should disable the \`Show More\` button if the card
     </button>
   </header>
    
-  <p
-    class="data-card__loading-notice"
+  <div
+    class="dusk-progress-bar data-card__progress-bar"
+    role="progressbar"
   >
-    Loading...
-  </p>
+    <div
+      class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
+    />
+  </div>
   
    
 </div>
diff --git a/explorer/src/lib/components/data-card/DataCard.css b/explorer/src/lib/components/data-card/DataCard.css
index 8ece50f1e4..c0a2efb286 100644
--- a/explorer/src/lib/components/data-card/DataCard.css
+++ b/explorer/src/lib/components/data-card/DataCard.css
@@ -21,3 +21,26 @@
   font-size: 1.125rem;
   line-height: 32.2px;
 }
+
+.data-card__progress-bar.dusk-progress-bar {
+  background-color: transparent;
+  height: 0.125rem;
+}
+
+.data-card__progress-bar .dusk-progress-bar__filler {
+  background-color: var(--primary-color);
+}
+
+.data-card__progress-bar .dusk-progress-bar__filler--undetermined {
+  width: 100%;
+  animation: progressBarAnimationAlternate 2s infinite;
+}
+
+@keyframes progressBarAnimationAlternate {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
diff --git a/explorer/src/lib/components/data-card/DataCard.svelte b/explorer/src/lib/components/data-card/DataCard.svelte
index 14eecb5bf6..8ac865397b 100644
--- a/explorer/src/lib/components/data-card/DataCard.svelte
+++ b/explorer/src/lib/components/data-card/DataCard.svelte
@@ -2,7 +2,7 @@
 
 <script>
   import { DataAlert } from "$lib/components";
-  import { Button, Card } from "$lib/dusk/components";
+  import { Button, Card, ProgressBar } from "$lib/dusk/components";
   import { makeClassName } from "$lib/dusk/string";
 
   import "./DataCard.css";
@@ -43,7 +43,7 @@
     {/if}
   </header>
   {#if loading && !data}
-    <p class="data-card__loading-notice">Loading...</p>
+    <ProgressBar className="data-card__progress-bar" />
   {:else if error || hasEmptyData}
     <DataAlert on:retry {error} />
   {:else if data}
diff --git a/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap
index 85c80d6c21..24103b95ce 100644
--- a/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap
+++ b/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap
@@ -30,11 +30,14 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
       </button>
     </header>
      
-    <p
-      class="data-card__loading-notice"
+    <div
+      class="dusk-progress-bar data-card__progress-bar"
+      role="progressbar"
     >
-      Loading...
-    </p>
+      <div
+        class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
+      />
+    </div>
     
      
   </div>
diff --git a/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
index e5af795136..da0ecdc881 100644
--- a/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
+++ b/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
@@ -22,11 +22,14 @@ exports[`Block Details > should render the Block Details page and query the nece
          
       </header>
        
-      <p
-        class="data-card__loading-notice"
+      <div
+        class="dusk-progress-bar data-card__progress-bar"
+        role="progressbar"
       >
-        Loading...
-      </p>
+        <div
+          class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
+        />
+      </div>
       
        
     </div>
@@ -51,11 +54,14 @@ exports[`Block Details > should render the Block Details page and query the nece
          
       </header>
        
-      <p
-        class="data-card__loading-notice"
+      <div
+        class="dusk-progress-bar data-card__progress-bar"
+        role="progressbar"
       >
-        Loading...
-      </p>
+        <div
+          class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
+        />
+      </div>
       
        
     </div>
diff --git a/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap
index 0c52329242..583bef4c76 100644
--- a/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap
+++ b/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap
@@ -30,11 +30,14 @@ exports[`Transactions page > should render the Transactions page, start polling
       </button>
     </header>
      
-    <p
-      class="data-card__loading-notice"
+    <div
+      class="dusk-progress-bar data-card__progress-bar"
+      role="progressbar"
     >
-      Loading...
-    </p>
+      <div
+        class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
+      />
+    </div>
     
      
   </div>
diff --git a/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap
index c3b676f4ca..34b35b3776 100644
--- a/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap
+++ b/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap
@@ -19,11 +19,14 @@ exports[`Transaction Details > should render the Transaction details page and qu
        
     </header>
      
-    <p
-      class="data-card__loading-notice"
+    <div
+      class="dusk-progress-bar data-card__progress-bar"
+      role="progressbar"
     >
-      Loading...
-    </p>
+      <div
+        class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
+      />
+    </div>
     
      
   </div>