How to make the right preloader?

Question

JavaScript

Hello.
I made a screen with animation for the preloader.
Duration - 3 seconds.
But the site may load faster or slower.
How to make the animation occur during the entire duration of the page loading, but if the site loads less than 3 seconds, the full page animation will work first, and then the site will be displayed.
In the animation through css, the width of the elements and transparency are changed.
The animation itself
https://goo.gl/dG2iib

Answer 1

As I understand it, you do not just want to cycle the preloader animation until the site loads, but stretch one cycle for the duration of the site loading.
It can be done, but there is one thing.
First, about the implementation
1) Determine the minimum resources that need to be loaded to disable the preloader (api, pictures, fonts)
2) Depending on the number, we divide the animation into stages (5 pictures, 2 fonts, 2 api - 9 stages) and prescribe classes for the animation transition between stages, and the animation should work both between
.stage1->stage2 and stage1-> stage9
3) We shove the loading of each resource in Promise and wrap it in Promise.each
bluebirdjs.com/docs/api/promise.each.html
4) When loading the next resource, change the class stagei-> stagei+1
Now about the problems, it is impossible to predict in advance whether the resources will load evenly or some resource will load longer, so the animation can be a little torn, but this problem needs to be solved together with the designer by adapting the animation.
An example of a promise to upload an image
https://jsfiddle.net/4odtcx6o/4/

Answer 2

as an option, you can create a separate css file in which to do something .preloader{display:block} and load this file as the last file.
In practice, this is a dumb undertaking, but theoretically it can be an acceptable result.

Answer 3

So, explain to me why this is not possible?

$(window).load(function() {
    startPreloader();
});

$(document).ready(function() {
    stopPreloader();
});