Esse desafio vai além de CSS, é pra te ensinar uma ferramenta ou melhor, uma opção incrível que o HTML. SVG nada mais são que tags, sim, tags, iguais a que usamos em HTML, porém o SVG é considerado um XML.
Já imaginou desenhar imagens só com tags? Sem canvas, sem png, sem jpeg. Puramente texto? É isso que eu adoro em SVG.
SVGs são muito usados em icones, e também em animações dentro de aplicações e sites.
Nesse desafio você trabalhará com
- svg
- animation
- keyframes
- transform
- propriedades de css que funcionam somente com svg;
Só pode ser usado HTML e CSS
É necessaŕio que:
- Utilize um icone svg que simbolize carregamento/loading, veja referência
- Anime a borda desse icone
- Anime a cor do icone
- Se seu icone se encaixar com rotação, rotacione, senão utilize movimento em Y ou X.
Você pode visualizar o modelo que eu fiz no CodePen
Você pode utilizar os sites FlatIcon ou Icon8.
Se não se sentir a vontade para escolher um icone, você pode utilizar o icone que eu usei