Как сделать такую штуку на CSS3?

Question

[WebforSelf]

Друзья, возник сложный вопрос: "Как можно анимировать данное изображение на css?"

Нужно, чтобы круги пульсировали, а круговая загрузка с 0 до 96 загружалась по кругу.
Искал по всему интернету, но ничего похожего не нашел, это вообще реально сделать?

Comments

[devstudent]

написать кусок анимации какой вам нужен и зациклить ее
animation-iteration-count: infinite;

Answer 1

[lagudal]

пульсирование кругов более наглядно на мой взгляд в вот такого рода анимациях можно подглядеть -
https://codepen.io/Webevasion/pen/wmrYbg
https://codepen.io/Valiev/pen/WxrzXm
https://codepen.io/Valiev/pen/akQZbG
по счетчику - если надо чтобы проценты считались, то без js никак, например
https://codepen.io/reddesigns/pen/qXPMZV
или подобное ищите - ключевые слова preloader animation, loading counter animation etc.

Answer 2

[Антон]

Совмещайте
https://codepen.io/camsiesmile/pen/mAxWQO
https://codepen.io/ash_malon/pen/mAdXmB
https://codepen.io/eZ0/pen/eZXNzd

Comments

[WebforSelf]

помочь сможете? Скину пару сотен на кофе.