diff --git a/web/src/app.css b/web/src/app.css
index 43461138..de04d3b6 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -145,6 +145,23 @@
 	--color-alpha-dark-85: color-mix(in srgb, var(--color-foreground-default) 85%, transparent);
 	--color-alpha-dark-90: color-mix(in srgb, var(--color-foreground-default) 90%, transparent);
 	--color-alpha-dark-95: color-mix(in srgb, var(--color-foreground-default) 95%, transparent);
+
+	/* --- animations --- */
+	--animate-spin-step: spin-step 2.5s infinite;
+
+	@keyframes spin-step {
+		0% {
+			transform: rotate(0deg);
+			animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		}
+		50% {
+			transform: rotate(180deg);
+			animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
 }
 
 @utility typography-heading-0 {
diff --git a/web/src/lib/components/repo/pipelines/PipelineStatusIcon.svelte b/web/src/lib/components/repo/pipelines/PipelineStatusIcon.svelte
index bffc9945..173e3405 100644
--- a/web/src/lib/components/repo/pipelines/PipelineStatusIcon.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineStatusIcon.svelte
@@ -26,7 +26,7 @@
 		variants: {
 			status: {
 				pending: "text-foreground-muted",
-				running: "text-foreground-warning",
+				running: "text-foreground-warning animate-[spin_2s_linear_infinite]",
 				success: "text-foreground-success",
 				failed: "text-foreground-danger",
 				timeout: "text-foreground-warning",
diff --git a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
index 2b9da6ae..85db3432 100644
--- a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
@@ -4,6 +4,7 @@
 	export const pipelineWorkflows = tv({
 		slots: {
 			waiting: "inline-flex items-center gap-1",
+			waitingSymbol: "animate-spin-step",
 			trigger: "flex items-center gap-2",
 			icon: "size-3 shrink-0",
 			symbol: "",
@@ -88,7 +89,7 @@
 			class={classes.waiting()}
 			title={variant === "symbol" ? "Waiting for a spindle" : undefined}
 		>
-			<PipelineSymbol {pipeline} class={classes.symbol()} />
+			<PipelineSymbol {pipeline} class={classes.waitingSymbol()} />
 			{#if variant === "count"}
 				<span class={classes.status()}>Waiting for a spindle…</span>
 			{/if}