Attempt at recreating FCC loading animation

https://codepen.io/avizmarlon/pen/oNLVaqx

I’m a newbie and just got to the keyframes and animation properties part of the Applied Visual Design and for challenge and fun I tried to replicate the FCC loading animation, I would like to receive suggestions, cause it’s not looking quite like it, but I don’t know why. The edges don’t seem smooth as well and I don’t know why too.

https://codepen.io/avizmarlon/pen/oNLVaqx

1 Like

@marlonaviz That is impressive. I would just try and slow it down a little bit. It seems more rushed than the FCC loading animation. Happy Coding! :smile:

1 Like

Hey @marlonaviz
As @landon.h.lloyd said it is rushing then FCC loading animation.
I am really impressived.
Good Job.

1 Like

I actually had that impression too! It seemed too fast. Thanks @landon.h.lloyd @codely. I will increase the animation-duration by half a second.

2 Likes

Now make it even cooler than the FCC animation. Perhaps make it spin or rotate in a 3d orientation? Or add some color to it? Make it your own and show FCC how it’s done!

1 Like

Yup @bbsmooth , my plan is to create my own loading animations. I’m replicating some cool ones for now to practice some concepts and kind of get an inspiration. Thanks!

Look @bbsmooth, I tried expanding on it: https://codepen.io/avizmarlon/pen/PozgjgV