Preloader with CSS ansd Javascript

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.

Here is demo

HTML Code

<div class="spinner" id="spinner">
    <div class="outer"></div>
    <div class="iner"></div>
    <div class="inner"></div>
    <div class="last"></div>
</div>

Markup

CSS Code

@keyframes spin {
    from {
        transform: rotate(0deg);
    }


    to {
        transform: rotate(360deg);

    }
}

body {
    padding: 0;
    margin: 0;
}

.spinner {
    padding: 0;
    margin: 0;
    background: #333;
    widows: 100vh;
    height: 100vh;
}

.outer {
    width: 200px;
    height: 200px;
    border: 2px solid #333;
    border-top: 3px solid #f25a41;
    border-bottom: 3px solid #f25a41;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    margin: auto;
    position: absolute;
    animation: spin 2s infinite linear;
}

.iner {
    width: 150px;
    height: 150px;
    border: 2px solid #333;
    border-bottom: 3px solid #f25a41;
    border-top: 3px solid #f25a41;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    margin: auto;
    position: absolute;
    animation: spin 1.95s infinite linear;
}

.inner {
    width: 100px;
    height: 100px;
    border: 2px solid #333;
    border-top: 3px solid #f25a41;
    border-bottom: 3px solid #f25a41;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    margin: auto;
    position: absolute;
    animation: spin 1.9s infinite linear;
}

.last {
    width: 50px;
    height: 50px;
    border: 2px solid #333;
    border-bottom: 3px solid #f25a41;
    border-top: 3px solid #f25a41;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    margin: auto;
    position: absolute;
    animation: spin 1.85s infinite linear;
}

CSS

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;
};

JavaScript

Your suggestion is valuable for us, please write your suggestion below in comment box.