« Web, HTML, Tech Forum

How do I make a loading screen for my layout?

Posted by Bwa

posted

Forum: Web, HTML, Tech

Ive Seen The Windows XP Layout By Cory And I Was Wondering If Anybody Knows How To Add A Loading Screen But With A Custom Image? (https://layouts.spacehey.com/layout?id=1169)

Thank You.


Report Topic

3 Replies

Sort Replies:

Reply by ★cazimeriz★

posted
updated

<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


Permalink Report Reply

Reply by

posted

Is there any way to sharpen an image before posting?

I want to zoom in and still have it sharp and speed stars unblocked.


Permalink Report Reply

Reply by Uikkorl

posted

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

Retro Bowl


Permalink Report Reply