circle.css

@keyframes lds-flickr-opacity {
    0% {
        -webkit-transform: translate(0 0);
        transform: translate(0 0);
        opacity: 1;
    }
    49.99% {
        opacity: 1;
        -webkit-transform: translate(80px, 0);
        transform: translate(80px, 0);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(80px, 0);
        transform: translate(80px, 0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
@-webkit-keyframes lds-flickr-opacity {
    0% {
        -webkit-transform: translate(0 0);
        transform: translate(0 0);
        opacity: 1;
    }
    49.99% {
        opacity: 1;
        -webkit-transform: translate(80px, 0);
        transform: translate(80px, 0);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(80px, 0);
        transform: translate(80px, 0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
@keyframes lds-flickr {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    50% {
        -webkit-transform: translate(80px, 0);
        transform: translate(80px, 0);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
@-webkit-keyframes lds-flickr {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    50% {
        -webkit-transform: translate(80px, 0);
        transform: translate(80px, 0);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
.lds-flickr {
    position: relative;
}
.lds-flickr div {
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    top: 43%;
    left: 33%;
    transform: translate(-50%, -50%);
}
.lds-flickr div:nth-child(1) {
    background: #3097bd;
    -webkit-animation: lds-flickr 1s linear infinite;
    animation: lds-flickr 1s linear infinite;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.lds-flickr div:nth-child(2) {
    background: #e03e58;
    -webkit-animation: lds-flickr 1s linear infinite;
    animation: lds-flickr 1s linear infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.lds-flickr div:nth-child(3) {
    background: #3097bd;
    -webkit-animation: lds-flickr-opacity 1s linear infinite;
    animation: lds-flickr-opacity 1s linear infinite;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.lds-flickr {
    -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
    transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}
.lds-css{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    width: 100%;
    height: 100%;
	background-color: #FFFFFF;
}