Можно воспользоваться готовыми плагинами
https://www.niklausgerber.com/projects/preloadme-a...
И, конечно же, написать свой, тоже никто не мешает, даже в образовательных целях.
Основные пункты реализации -
- Создать элемент прелоадера
- Поместить элемент прелоадера сразу после
<body>
- Прописать стили, анимации
- Написать сам скрипт в
$(window).on('load', function() { ... });
Например:
$(window).on('load', function () {
var pre= $('.preloader');
var indicator = pre.find('.indicator');
indicator.fadeOut();
pre.delay(350).fadeOut('slow');
});
Простой
