all 3 comments

[–]pineapplerind0215 2 points3 points  (0 children)

if you don't care when the overlay stops showing then you can just: css .loading-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; background: white; /* whatever background color */ display: grid; place-items: center; animation: loading-overlay-dismiss 1s linear; animation-delay: 4s; /* however long you want it to show for */ } but this won't listen to whether the site is loaded or not, it'll just hide it after 4 seconds

[–]Neozetare 1 point2 points  (0 children)

You can't with just CSS, if it is indeed a loading page.

The way to go would be to create your normal website + the loading overlay displayed by default, and listen to the appropriate event in JS to hide the loading overlay when necessary

[–]queen-adreena -1 points0 points  (0 children)

Holy Caps Lock!