Как зациклить прелоадер?

Question

[Banan44]

Как зациклить мой прелоадер? Я знаю что можно прописать animation-iteration-count: infinite, но мне нужно чтобы палочки изменяли свою высоту по очереди.

Comments

[0xD34F]

Что вам помешало нагуглить готовый пример и разобраться с ним?

[Banan44]

0xD34F, ну я только на препроцессорах нашел, а там циклы были и т.д

[0xD34F]

Banan44, во-первых - плохо искали. Во-вторых - код "на препроцессорах" существует на этапе написания, а имея в браузере результат его выполнения, вам доступен чистый css.

[Banan44]

0xD34F, но в примере был только код на sass. А плохо искал потому что не знаю как правильно называется такой прелоадер, там он назывался wave preloader.

[Banan44]

Moon Presence, посмотрел, но код там нечитаемый, там точно так же есть animation delay как у меня, мне лишь разобраться как это сделать эту задержку на каждую новую анимацию

[Banan44]

Moon Presence, нет, прямо как у меня в codepen

Answer 1

[RAX7]

Comments

[Banan44]

спасибо, но не понятно почему у вас работает animation delay каждый раз, я вижу что у нас есть 1.2s когда анимация в простое (это что бы по порядку вызывать анимацию у баров). Можете подробнее описать как это работает?

[RAX7]

Banan44, не 1.2s, а -1.2s, в этом весь трюк. Подробней можешь посмотреть здесь https://css-tricks.com/debugging-css-keyframe-anim... чтобы понять как это работает.