diff --git a/inspire.css b/inspire.css
index e654375..ff38b19 100755
--- a/inspire.css
+++ b/inspire.css
@@ -80,6 +80,25 @@ body {
 	text-align: center;
 	font-weight: bold;
 
+	&:is(.has-items *)::before {
+		--size: .5em;
+		--on-size: 60%;
+		--off-size: 40%;
+		--on-color: canvastext;
+		--off-color: color-mix(in oklab, canvas, canvastext);
+		--circles: radial-gradient(circle closest-side, canvastext 40%, transparent 0) top / var(--size) var(--size) repeat-y;
+		content: "";
+		position: absolute;
+		top: calc(100% + .3em);
+		left: calc(50% - var(--size) / 2);
+		aspect-ratio: 1 / var(--total-items);
+		width: var(--size);
+		background:
+			linear-gradient(var(--on-color) calc(100% * var(--items-done) / var(--total-items)), transparent 0),
+			radial-gradient(circle closest-side, var(--off-color) var(--off-size), transparent 0) top / var(--size) var(--size) repeat-y;
+		-webkit-mask: radial-gradient(circle closest-side, white var(--on-size), transparent 0) top / var(--size) var(--size) repeat-y;
+	}
+
 	&:not(:empty)::after {
 		counter-reset: total var(--total-slides);
 		content: counter(total);
diff --git a/src/inspire.js b/src/inspire.js
index 4f6594a..d945f5e 100755
--- a/src/inspire.js
+++ b/src/inspire.js
@@ -575,13 +575,22 @@ let _ = {
 		_.items = _.items.sort((a, b) => {
 			return (a.getAttribute("data-index") || 0) - (b.getAttribute("data-index") || 0);
 		});
+		document.documentElement.style.setProperty("--total-items", _.items.length);
+		document.documentElement.classList.toggle("has-items", _.items.length > 0);
+
+		if (_.items.length > 0) {
+			document.documentElement.style.setProperty("--items-done", 0);
+		}
+		else {
+			document.documentElement.style.removeProperty("--items-done");
+		}
 	},
 
 	/**
 	 * Go to a specific item in the current slide
 	 * @param {number} which 1-based index of the item to go to (0 means no items are current, just the slide itself)
 	 */
-	gotoItem(which) {
+	gotoItem (which) {
 		_.item = which;
 
 		if (_.items.length > 0 && !_.items[which - 1]?.isConnected) {
@@ -614,6 +623,10 @@ let _ = {
 				}
 			}
 
+			// Update item index
+			let done = _.items.length - _.items.filter(item => item.matches(":not(.current, .displayed)")).length;
+			document.documentElement.style.setProperty("--items-done", done);
+
 			// Deal with data-steps
 			if (stepElement) {
 				let step;
@@ -639,7 +652,6 @@ let _ = {
 					stepElement.setAttribute("data-step-all", "0");
 				}
 			}
-
 		}
 
 		_.hooks.run("gotoitem-end", {which, context: this});