« Web, HTML, Tech Forum

how to make a custom loading screen??

Posted by princess

posted

Forum: Web, HTML, Tech

i wanna make my own like custom gif loading screen but irdk how can someone help plssssssss


Report Topic

1 Reply

Reply by yasmin !

posted

hey!! heres how to do it! use this code:

 <style>

body:before {


content: " ";


height: 100vh;


width: 100vw;


display: block;


position: fixed; 


top: 0; 


left: 0; 


z-index: 100;


background-image: url('LINK HERE');


background-size: cover;


background-repeat: no-repeat;


background-position:center;


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


pointer-events: none;}


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

</style>


copy the image address of the gif/image you want and paste where it says "LINK HERE"!


Report Reply