loading.css

.loader-fullscreen-wrapper {
    position  : fixed;
    top   : 0 ;
    bottom: 0 ;
    left  : 0 ;
    right : 0 ;
    z-index   : 2147483647;
    background-color: rgb( 0,99,146 );
}


.loader {
    position: relative;
    padding:30px; 
    width : 80px;
    height: 80px;
    margin: auto;
    border-radius: 100%;
    box-shadow: 4px 4px 12px 0px #BBB;
    background: rgb( 0,99,146 );
}
.loader-fullscreen {
    position: absolute;
    top   : 50% ;
    left  : 50% ;
    width : 80px;
    height: 80px;
    transform : translate( -50%,-50% );
    background: transparent;
}


.loader-fullscreen > .circle ,
.loader            > .circle {
    position: absolute;
    width : 76px;
    height: 76px;
    opacity: 0;
    transform: rotate(225deg);
    animation-iteration-count: infinite;
    animation-name: orbit;
    animation-duration: 5.3s;
}


.loader-fullscreen > .circle:before ,
.loader            > .circle:before {
    content: '';
    position: absolute;
    width : 8px;
    height: 8px;
    border-radius: 100%;
    background: #FEFEFE;
}


.loader-fullscreen > .circle:nth-child(2) ,
.loader            > .circle:nth-child(2) {
    animation-delay: 250ms;
}
.loader-fullscreen > .circle:nth-child(3) ,
.loader            > .circle:nth-child(3) {
    animation-delay: 500ms;
}
.loader-fullscreen > .circle:nth-child(4) ,
.loader            > .circle:nth-child(4) {
    animation-delay: 750ms;
}
.loader-fullscreen > .circle:nth-child(5) ,
.loader            > .circle:nth-child(5) {
    animation-delay:1000ms;
}


/* animation */

@keyframes orbit {
    0% {
        transform: rotate(225deg);
        opacity: 1;
        animation-timing-function: ease-out;
    }
    7% {
        transform: rotate(345deg);
        animation-timing-function: linear;
    }
    30% {
        transform: rotate(455deg);
        animation-timing-function: ease-in-out;
    }
    39% {
        transform: rotate(690deg);
        animation-timing-function: linear;
    }
    70% {
        transform: rotate(815deg);
        opacity: 1;
        animation-timing-function: ease-out;
    }
    75% {
        transform: rotate(945deg);
        opacity: 0;
    }
}