Как сделать правильный прелоадер?

Я так понимаю, вы не просто хотите крутить циклически анимацию прелодера пока сайт не загрузится, а растянуть один цикл на все время загрузки сайта.
Сделать это можно, но есть одно но.
Сначала про реализацию
1) Определяем минимум ресурсов, которые нужно загрузить для отключения прелодера (апи, картинки, шрифты)
2) В зависимостиот количества разбиваем анимацию на этапы (5 картинок, 2 шрифта, 2 апи - 9 этапов) и прописываем классы для перехода анимации между этапами, при чем анимация должна работать как между
.stage1->stage2 так и stage1-> stage9
3) Пихаем загрузку каждого ресурса в Promise и оборачиваем в Promise.each
bluebirdjs.com/docs/api/promise.each.html
4) При загрузке очередного ресурса меняем класс stagei-> stagei+1

Теперь о проблемах, нельзя предсказать заранее будут ли ресурсы грузиться равномерно или какойто ресурс будет грузиться дольше, поэтому анимация может быть немного рваной, но эту проблему нужно решить совместно с дизайнером, адаптировав анимацию.

Пример промиса для загрузки картинки
https://jsfiddle.net/4odtcx6o/4/

как вариант можно создать отдельный css файл в котором сделать чтото .preloader{display:block} и этот файл грузить последним файлом.

практически это стремная затея, а теоретически это может быть приемлимым результатом.

Так, объясните мне, почему вот так нельзя?

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

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