Simple CSS animated loading icon

Hello!
I've recently got my first real programming job as a junior programmer and I'm still learning various thing along the way. Also, some time ago I have started thinking about writing some blog post to this site so here is my first attempt :)

For my first post, I've wanted to write about something simple so there is less space for me to make mistake :) so I've made a simple animated loading icon with CSS.

Here is codepen:

The animation is based on keyframes as you can see.
Basically,I'm just scaling and rotating html element and infinitely looping animation with alternating direction with means that keyframe animation is played forwards and then backward with ease-in-out timing function that sets the speed of the animation. The ease-in-out timing function plays animation starting and ending slowly. For example, if I've used ease-in function the animation will start slowly.

Any feedback positive or negative is highly appreciated! :) I'm looking forward to write about more stuff I've learned (including Spring, React and maybe Angular)

Thank you for reading :)

Comments

[Alex Parra]

Hi Pavol!
Nice work.

Have you noticed these types of animations freeze when the browser gets busy on some http request? I’ve seen it with animated SVGs and the only way I got over it was with a GIF instead.
If anyone has faces this and has a better solution than an GIF I’d like to know.
Best

[Pavol Ďuďák]

Thank you, Alex :) I didn't experience any issues with animation freezing when I make Http request, but when I tested this I tested it with a simple GET request to jsonplaceholder.typicode.com. I will look out for this in the future. Have a nice day :)

[Nick]

very cool

[Trần Duy Thoại]

thanks ! i really like it !