Как сделать такой экран загрузки?

Question

[wakenbyWork]

https://aebeleinteriors.com/ - Вот красивый загрузочный экран, стоит задача создать такой-же.

Я понимаю нужно как-то разделить стили и скрипты на две части. Одна это загрузочный экран, вторая весь остальной сайт. Чтобы стили и скрипты самого сайта не мешали загрузки скриптов и сначала загрузился html css js загрузочного экрана, после уже начал бы загружаться основной сайт, и как все загрузилось загрузочный экран бы вырубался.

Или я вообще не в том направлении думаю. Просто Если хранить все в одном css/js то пока js загрузиться будет мелькать html сайта а после уже загрузочный экран будет((

Answer 1

[Ivan Bogachev]

Если хранить все в одном css/js то пока js загрузиться будет мелькать html сайта а после уже загрузочный экран будет

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

красивый загрузочный экран, стоит задача создать такой-же... стили и скрипты...

Скрипты здесь не нужны, можно все на CSS сделать (ну только потом, в основном скрипте, когда он загрузится, нужно будет убрать этот экран). А еще, как вариант, можно воспользоваться древней магией под кодовым названием SMIL для встроенной в страницу SVG-картинки с логотипом и надписью. Будет по сути то же самое, только сбоку.