Custom spinner

by Faisal Pathan

HTML

<h1>
Spinner
</h1>
  <div class="spinner"</div>

CSS

.spinner-body body:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.8);
    }

    .spinner-body body {
        position: relative;
        overflow: hidden;
        height: 100%;
    }


    .spinner-body {
        height: 100%;
    }


    .spinner {
        position: fixed;
        top: 50%;
        right: 0;
        width: 40px;
        height: 40px;
        background: linear-gradient(45deg, #3bade3 0%, #576fe6 25%, #9844b7 51%, #ff357f 100%);
        z-index: 9;
        margin: 0 auto;
        -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
        animation: sk-rotateplane 1.2s infinite ease-in-out;
        left: 0;
        transform: translateY(-50%);
    }

    @-webkit-keyframes sk-rotateplane {
        0% {
            -webkit-transform: perspective(120px)
        }

        50% {
            -webkit-transform: perspective(120px) rotateY(180deg)
        }

        100% {
            -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
        }
    }

    @keyframes sk-rotateplane {
        0% {
            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
        }

        50% {
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
        }

        100% {
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        }
    }

JavaScript

function showLoader() {
        $("html").addClass('spinner-body');
        $('.spinner').show();
    }

    function hideLoader() {
        $("html").removeClass('spinner-body');
        $('.spinner').hide();
    }
showLoader();