body .whirl {
    position: relative;
}

    body .whirl:before {
        content: attr(data-spinner-text);
        display: block;
        background-color: #f0f0f0;
        opacity: .7;
    }

    body .whirl.solid {
        opacity: 1;
    }

    body .whirl:after {
        border-top-color: #5d9cec;
    }

    body .whirl.blade:after {
        border-bottom-color: #5d9cec;
    }

    body .whirl.double-up:after {
        border: #5d9cec;
    }

    body .whirl.duo:after {
        border-right-color: #5d9cec;
        border-left-color: #5d9cec;
        border-top-color: #7266ba;
        border-bottom-color: #7266ba;
    }

    body .whirl.helicopter:after {
        background-color: #5d9cec;
    }

    body .whirl.ringed:after {
        border-right-color: #23b7e5;
        border-top-color: #7266ba;
        border-left-color: #7266ba;
        border-bottom-color: #7266ba;
    }

    body .whirl.traditional:after {
        border-right-color: #23b7e5;
        border-top-color: #23b7e5;
        border-left-color: #7266ba;
        border-bottom-color: #fad732;
    }

    body .whirl.line:after {
        box-shadow: inset -10px 0 0 rgba(93, 156, 236, .5);
    }

.no-cssanimations body .whirl:before {
    opacity: .9;
}

.no-cssanimations body .whirl:after {
    content: "Loading...";
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    line-height: 40px;
    color: #000;
    opacity: 1;
    border: 0;
    box-shadow: 0 0 0 #000;
    background-color: transparent;
    text-align: center;
}

/* Individual div loader.*/

.sk-child:before,
sk-three-bounce div {
    background-color: #5d9cec !important;
}

.loader-demo.loader-demo-sk {
    padding-top: 0;
}

div.sk-three-bounce {
    /*margin:0 auto;*/
    width: 80px;
    text-align: center;
    margin: 0 auto;
    padding-top: 60px;
}

.sk-three-bounce .sk-child {
    width: 20px;
    height: 20px;
    background-color: #333;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
    animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}

.sk-three-bounce .sk-bounce1 {
    -webkit-animation-delay: -.32s;
    animation-delay: -.32s;
}

.sk-three-bounce .sk-bounce2 {
    -webkit-animation-delay: -.16s;
    animation-delay: -.16s;
}

@-webkit-keyframes sk-three-bounce {
    0%, 80%, to {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-three-bounce {
    0%, 80%, to {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}