style.css

@media (height > 600px) and (width > 900px) {
	.tally-progress-bar {
		position: fixed;
	}
}

.tally-progress-bar-item {
	height: .6em;

	&.tally-progress-bar-item-done {
		&, &::after {
			background-color: var(--wa-color-green-80);
		}

		&::after {
			box-shadow: 0 0 8px -3px var(--wa-color-green-60);
		}
	}
}

tally-style-progress-bar.js

let progressClass = {};
	
window.addEventListener("Tally.FormPageView", function (e) {
  // Handle progress bar done and undone classes
  // Without rAF this runs before the progress bar is added in the first page
  requestAnimationFrame(_ => {
    let doneItem = document.querySelector(".tally-progress-bar-item");
    let undoneItem = document.querySelector(".tally-progress-bar-item:last-child:not(:first-child)");

    // Find which classes are different between done and undone items
    if (doneItem && progressClass.done === undefined) {
      for (let name of doneItem.classList) {
        if (!undoneItem.classList.contains(name)) {
          progressClass.done = name;
          break;
        }
      }
    }

    if (undoneItem && progressClass.undone === undefined) {
      for (let name of undoneItem.classList) {
        if (!doneItem.classList.contains(name)) {
          progressClass.undone = name;
          break;
        }
      }
    }

    if (progressClass.done && progressClass.undone) {
      for (let item of document.querySelectorAll(".tally-progress-bar-item")) {
        let isDone = item.classList.contains(progressClass.done);
        let isUndone = item.classList.contains(progressClass.undone);
        item.classList.toggle("tally-progress-bar-item-done", isDone);
        item.classList.toggle("tally-progress-bar-item-undone", isUndone);
      }
    }
  });
});