Pure HTML CSS Page Preloader

Essentially, preloaders (also known as loaders) are what you see on the screen while the rest of the page’s content is still loading. Preloaders are often simple or complex animations that are used to keep visitors entertained while server operations finish processing. Unfortunately, they are also frequently overlooked in the development process of most projects.

HTML Code

<div class="loader"  id="spinner">
    <div class="fa-first"></div>
    <div class="fa-second"></div>
    <div class="fa-third"></div>
    <div class="fa-fourth"></div>
    <div class="fa-first-in"></div>
    <div class="fa-second-in"></div>
    <div class="fa-third-in"></div>
    <div class="fa-fourth-in"></div>
</div>

CSS Code

body{
    padding: 0;
    margin: 0;
    }
    
    .loader {
    padding: 0;
    margin: 0;
    background: #000;
    widows: 100vh;
    height: 100vh;
    
    }
    
    .fa-first {
    border-radius: 50%;
    height: 180px;
    width: 180px;
    border: 5px solid transparent;
    border-top: 5px solid #6600CC;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
    animation: spin 1.66s infinite linear;
    }
    
    .fa-second {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-right: 5px inset #FFCC00;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
    animation: spin 1.58s infinite linear;
    }
    .fa-third {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-bottom: 5px inset #CC0000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
    animation: spin 1.66s infinite linear;
    }
    .fa-fourth {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-left: 5px inset #00FF00;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
    animation: spin 1.58s infinite linear;
    
    }
    .fa-first-in {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top: 5px solid rgb(156, 69, 228);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
    animation: spin 1.68s infinite linear reverse;
    animation-delay: .3s
    }
    
    .fa-second-in {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-right: 5px inset rgb(255, 0, 0);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
    animation: spin 1.56s infinite reverse linear;
    animation-delay: .3s
    }
    
    .fa-third-in {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-bottom: 5px inset rgb(255, 217, 0);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
    animation: spin 1.68s infinite reverse linear;
    animation-delay: .3s
    }
    
    .fa-fourth-in {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-left: 5px inset rgb(73, 206, 151);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
    animation: spin 1.56s infinite reverse linear ;
    animation-delay: .3s
    }
    
    @keyframes spin {
    form {
    transform: rotate(0deg);
    }
    
    to {
    transform: rotate(360deg)
    }
    }

Javascript

window.onload = function () {
    var elem = document.getElementById('spinner');
    elem.style.transition = "opacity 0.5s linear 0s";
    elem.style.opacity = 0;
    elem.style.height = 0;
};

Your suggestion is valuable for us, Write your suggestion below