Forum:
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.
« Web, HTML, Tech Forum
How do I make a loading screen for my layout?
Report Topic
5 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
Reply by Fruit_Loops76
posted
Reply by emelialucass
posted
Upload image: Select an image and upload it to an image hosting service (like Imgur) to get a direct link.
Edit CSS code: In the "Edit Layout" section of the layout, add the following CSS code:
/* Loading screen */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.loading-screen {
background: url('YOUR_IMAGE_URL') no-repeat center center;
background-size: contain;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
}
Replace YOUR_IMAGE_URL with your image link.
Save the layout and you will see the loading screen displayed when you open the page.
Good luck!
Reply by happyepicfrost88
posted
<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('https://drivemadgame.cc/');
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
Reply by katarina8
posted
The technique of reviving the classic look of Windows XP on a modern platform always makes a London-based web developer stop and applaud. To add a loading screen with personalized images, you should try your hand at CSS overlays and real-time animations to optimize the user experience. The intense focus on adjusting each line of code brings a unique joy, reminiscent of the times I painstakingly navigated Drift Boss to keep everything running smoothly. Hopefully, you will create a truly stylish interface and receive much support from the community.