animation-timing-function: steps(4, end) делает индикатор «прыгающим» по четвертям — дешёвый skeleton для многошагового брифа.
В @keyframes меняйте width или transform: scaleX — transform дешевле для композитора.
- [steps() — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/steps) — Ступенчатый easing.
- [Using CSS animations — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) — @keyframes.
---
## Доступность
Не полагайтесь только на анимацию — дублируйте шаг текстом для screen reader.