steps() и @keyframes: ступенчатый прогресс загрузки

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.