How to make such a loading screen?

W

wakenbyWork2021-07-09 16:33:16

css

wakenbyWork, 2021-07-09 16:33:16

https://aebeleinteriors.com/ - Here is a beautiful loading screen, the task is to create the same one.

I understand that you need to somehow separate styles and scripts into two parts. One is the loading screen, the other is the rest of the site. So that the styles and scripts of the site itself do not interfere with the loading of scripts and the html css js of the loading screen is loaded first, after that the main site would already start loading, and as everything loaded the loading screen would be cut down.

Or maybe I'm thinking in the wrong direction. Simply If you store everything in one css / js, then while js is loaded, the html of the site will flash, and after that the loading screen will be ((

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

I

Ivan Bogachev, 2021-07-09
@wakenbyWork

If you store everything in one css / js, then while js is loaded, the html of the site will flash, and after that the loading screen will be

Critical CSS can be inserted inline into a page at the very beginning. This is also done on regular sites to avoid showing through unstyled content when the page loads.

beautiful loading screen, the task is to create the same ... styles and scripts ...

Scripts are not needed here, you can do everything in CSS (well, only later, in the main script, when it loads, you will need to remove this screen). Or, alternatively, you can use the ancient magic codenamed SMIL for an SVG image embedded in the page with a logo and an inscription. It will be essentially the same, only on the side.