How To Use Simple Way Preloader in HTML?

Using this code you can demonstrate the preloader on your HTML website. You can customize it as you want. Besides, it will work responsively on any website and device without any plugins and extra coding.

So, Let’s get started!

HTML:

 <div class="preloader-area">
    <div class="spinner">
        <div class="inner">
            <div class="disc"></div>
            <div class="disc"></div>
            <div class="disc"></div>
        </div>
    </div>
</div>

CSS:

.preloader-area {
    position: fixed;
    z-index: 999999;
    background-color: #111d5e;
    width: 100%;
    height: 100%;
    text-align: center;
    left: 0;
    right: 0;
    top: 0;
}
 .preloader-area .spinner {
    width: 4em;
    height: 4em;
    transform: perspective(20em) rotateX(-24deg) rotateY(20deg) rotateZ(30deg);
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    transform: translateY(-45%);
    margin-left: auto;
    margin-right: auto;
}
 .preloader-area .spinner .disc {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 0.3em dotted #fff;
}
 .preloader-area .spinner .disc:nth-child(1) {
    animation: rotate 12s linear infinite;
}
 .preloader-area .spinner .disc:nth-child(2) {
    animation: rotateDisc2 12s linear infinite;
}
 .preloader-area .spinner .disc:nth-child(3) {
    animation: rotateDisc3 12s linear infinite;
}
 .preloader-area .spinner .inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: sphereSpin 6s linear infinite;
}
 .preloader-area .spinner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    right: 0;
    bottom: 0;
    border: 2px dotted #fff;
    margin: -15px;
}
 @keyframes sphereSpin {
    0% {
        transform: rotateX(360deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(0deg) rotateY(360deg);
    }
}
 @keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
 @keyframes rotateDisc2 {
    from {
        transform: rotateX(90deg) rotateZ(0deg);
    }
    to {
        transform: rotateX(90deg) rotateZ(360deg);
    }
}
 @keyframes rotateDisc3 {
    from {
        transform: rotateY(90deg) rotateZ(0deg);
    }
    to {
        transform: rotateY(90deg) rotateZ(360deg);
    }
}

JavaScript:

$(window).on('load', function() {
    $('.preloader-area').fadeOut();
});