Help making a loading screen?

Hello everyone! I have been trying to make a loading screen for my profile but it just wont show up. Here is what I am using. 

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://i.imgur.com/cIFh5gm.gif');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

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

pointer-events: none;}

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

</style>

-----------------------------------------------------------------------------------------------------------

I have tried multiple other codes for the loading screen as well but nothing will work :< this is my current one. Any help is greatly appreciated!