diff --git a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
index 5005400..c581879 100644
--- a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
+++ b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
@@ -46,10 +46,10 @@
                             @if (message.Text is null)
                             {
                                 <div class="card card-text d-inline-block p-3 px-3 m-1">
-                                    <div class="progress-chat" role="progressbar" aria-label="I'm thinking" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-                                        <div class="progress-bar-chat">
-                                            <div class="progress-bar-indeterminate"></div>
-                                        </div>
+                                    <div class="typing-indicator" role="status" aria-label="The assistant is typing">
+                                        <span class="typing-dot"></span>
+                                        <span class="typing-dot"></span>
+                                        <span class="typing-dot"></span>
                                     </div>
                                 </div>
                             }
diff --git a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css
index a1d796d..4ea9bdb 100644
--- a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css
+++ b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css
@@ -43,40 +43,55 @@ input[type="checkbox"] + label {
     border-radius: 8px;
 }
 
-.progress-chat {
-    width: 200px;
-    height: 6px;
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    height: 8px;
 }
 
-.progress-bar-chat {
-    height: 6px;
-    background-color: rgba(5, 114, 206, 0.15);
-    width: 100%;
-    overflow: hidden;
-    border-radius: 999px;
+.typing-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: rgb(5, 114, 206);
+    animation: typing-bounce 1.2s infinite ease-in-out both;
 }
 
-.progress-bar-indeterminate {
-    width: 40%;
-    height: 100%;
-    border-radius: 999px;
-    background: linear-gradient(90deg, rgba(5, 114, 206, 0) 0%, rgb(5, 114, 206) 50%, rgba(5, 114, 206, 0) 100%);
-    animation: indeterminate-animation 1.4s infinite cubic-bezier(0.65, 0, 0.35, 1);
-}
-
-@keyframes indeterminate-animation {
-    0% {
-        transform: translateX(-100%);
+    .typing-dot:nth-child(1) {
+        animation-delay: -0.24s;
     }
 
-    100% {
-        transform: translateX(350%);
+    .typing-dot:nth-child(2) {
+        animation-delay: -0.12s;
+    }
+
+@keyframes typing-bounce {
+    0%, 80%, 100% {
+        transform: translateY(0);
+        opacity: .4;
+    }
+
+    40% {
+        transform: translateY(-5px);
+        opacity: 1;
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .progress-bar-indeterminate {
-        animation-duration: 3s;
+    .typing-dot {
+        animation-name: typing-fade;
+        animation-duration: 2s;
+    }
+
+    @keyframes typing-fade {
+        0%, 80%, 100% {
+            opacity: .4;
+        }
+
+        40% {
+            opacity: 1;
+        }
     }
 }