How do I make a loading screen for my layout?

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 1s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>

copy and paste that and where it says 

background-image: url('');

you want to put the image url in between the url(''); for example

background-image: url('https://64.media.tumblr.com/59d921976394727b485dc34d31d6abe7/tumblr_mpu5u5X1H21szfc26o2_500.gif');

also you can adjust where it says

animation: yourAnimation 1s ease 1s 1 normal forwards;

to make your laoding screen stay on longer or shorter

Every game requires you to make crucial decisions on the starting lineup, game strategy.

Retro Bowl

Before making any changes, be sure to back up your important data. slope game 

This is exactly what I was looking for! I've been wanting to add a loading screen to my page but had no idea how. Thank you so much for providing the code and the clear explanation! When you need to reduce stress, you can play drive mad.