How to properly implement a preloader for a site?

Question

css

I decided to hang a preloader on the site and thought about how to make it competently, I want to do it according to my mind. Not just an animation with a timer, but so that the page loads and the animation disappears. How to do it?
I will be grateful.

Answer 1

https://www.youtube.com/watch?v=rSjYDeWYz0w&featur...

Answer 2

You can hide the preloader block through document ready.
You can make the animation of the preloader yourself.

Answer 3

If you use jquery $('#loader-wrapper').fadeOut(300);
The animation of the loader itself can be found on the codepen using the site search with the keyword loader