.sp 
{
    width: 32px;
    height: 32px;
    clear: both;
    margin: 20px auto;
}

/* Spinner 3Balls Scale */
.sp-3balls, .sp-3balls:before, .sp-3balls:after 
{
    border-radius: 50%;
    background-color: #000;
    width: 18px;
    height: 18px;
    transform-origin: center center;
    display: inline-block;
}

.sp-3balls 
{
    position: relative;
    background-color: black;
    opacity: 1;
    -webkit-animation: spScaleAlpha 1s infinite linear;
    animation: spScaleAlpha 1s infinite linear;
}

.sp-3balls:before, .sp-3balls:after 
{
    content: "";
    position: relative;
    opacity: 0.25;
}

.sp-3balls:before 
{
    left: 30px;
    top: 0px;
    -webkit-animation: spScaleAlphaBefore 1s infinite linear;
    animation: spScaleAlphaBefore 1s infinite linear;
}

.sp-3balls:after 
{
    left: -30px;
    top: -23px;
    -webkit-animation: spScaleAlphaAfter 1s infinite linear;
    animation: spScaleAlphaAfter 1s infinite linear;
}

@-webkit-keyframes spScaleAlpha 
{
    0% 
    {
        opacity: 1;
    }

    33% 
    {
        opacity: 0.25;
    }

    66% 
    {
        opacity: 0.25;
    }

    100% 
    {
        opacity: 1;
    }
}

@keyframes spScaleAlpha 
{
    0% 
    {
        opacity: 1;
    }

    33% 
    {
        opacity: 0.25;
    }

    66% 
    {
        opacity: 0.25;
    }

    100% 
    {
        opacity: 1;
    }
}

@-webkit-keyframes spScaleAlphaBefore 
{
    0% 
    {
        opacity: 0.25;
    }

    33% 
    {
        opacity: 1;
    }

    66% 
    {
        opacity: 0.25;
    }
}

@keyframes spScaleAlphaBefore 
{
    0% 
    {
        opacity: 0.25;
    }

    33% 
    {
        opacity: 1;
    }

    66% 
    {
        opacity: 0.25;
    }
}

@-webkit-keyframes spScaleAlphaAfter 
{
    33% 
    {
        opacity: 0.25;
    }

    66% 
    {
        opacity: 1;
    }

    100% 
    {
        opacity: 0.25;
    }
}

@keyframes spScaleAlphaAfter 
{
    33% 
    {
        opacity: 0.25;
    }

    66% 
    {
        opacity: 1;
    }

    100% 
    {
        opacity: 0.25;
    }
}