Jean's profile picture

Published by

published

Category: Web, HTML, Tech

Create Your Own Custom Loading Screen

Hey Guys, here's a basic way to create a custom loading screen for your Spacehey Profile!

<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('INSERT GIF URL HERE');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 0s ease INSERT LENGTH OF GIFs 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
</style>

In regards to finding your GIF, anywhere works, but an easy site to use is https://tenor.com/, 

also note that the "animation: yourAnimation 0s ease INSERT LENGTH OF GIFs 1 normal forwards;" the "0s ease" is when the GIF starts, and the second "(x)s" determines how long this layout screen lasts if you don't want to use the entire GIF, or alternatively want it to loop, Hope this helps :)!



1 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )