How can page loader animations for single page application be created.

Question

Single page application contains everything about a website in a single page, and because of that, sometimes it takes time for it to load, this is been handled by creating a page loader animation, to make waiting for the website not to be bored.

Answer 1

There are many ways to create an animation... some are best suited for each cases: what kind of design would you create?

As suggested by @Domagoj Puljic, Css @keyframes rules can be used efficiently, but you can also do animation with 'simple' gif animated bitmap (created with tool like Gimp/Photoshop and co. -- but need of lightweight file for preload animation make them not very much suited), or even Svg (embeded or linked -- the embeded version is always preferable for preload image/animation), as well as Canvas and JS (required for <canvas> use, but optional for other technics, so animation run even if JS not available or desactivated). 3d can be handle more or less with all these ways...

In a general purpose of creating animation, complex ones will often require JS (to be more web optimized than a video or even a gif animation), and sometimes frameworks can be widely useful for handle particular stuff (rather than all writing from scratch, reiventing the wheel, except if you love that, but even in such cases, writing completly from scratch could become difficult to achieve alone :/), as 3D physics realistic animations, or even 2D advanced ;P

Video is another obvious way, but very bad suited for preload animation ^^

Answer 2

https://code.sololearn.com/W39ioBVR1eJn/?ref=app
https://code.sololearn.com/WQFY6mw16wjK/?ref=app

Answer 3

@visph please how can the animation be created, I will like to create my own design.