/* Centre the loader */
.kk-content-loader {
    position: relative;
    left: 50%;
    z-index: 1;
    width: 80px;
    height: 80px;
    margin-top: 50px;
    margin-left: -50px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid rgb(72, 146, 254);
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* Add animation to "page content" */
.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
}

@-webkit-keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0px;
        opacity: 1
    }
}

/* Ripple */
@keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

.kk-content-loader-ripple,
.kk-content-loader-ripple div {
    box-sizing: border-box;
}

.kk-content-loader-ripple {
    display: inline-block;
    position: relative;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-top: 40px;
    margin-left: -40px;
}

    .kk-content-loader-ripple div {
        position: absolute;
        border: 4px solid currentColor;
        opacity: 1;
        border-radius: 50%;
        animation: kk-content-loader-ripple 1.6s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .kk-content-loader-ripple div:nth-child(2) {
            animation-delay: -0.8s;
        }

@keyframes kk-content-loader-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 8px;
        height: 8px;
        opacity: 0;
    }

    4.9% {
        top: 36px;
        left: 36px;
        width: 8px;
        height: 8px;
        opacity: 0;
    }

    5% {
        top: 36px;
        left: 36px;
        width: 8px;
        height: 8px;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}