Yükleniyor

by XcsN

HTML

<div class="modal-loading">
    <div class="caption">Yükleniyor...</div>
    <div class="animation"></div>
</div>

CSS

.modal-loading {
    position: fixed;
    width: 20rem;
    height: 10rem;
    left: 50%;
    top: 50%;
    margin-left: -10rem;
    margin-top: -5rem;
    background: #1d2a3e;
    border-radius: 0.2rem;
    border: 0.1rem solid #8fa0b2;
    z-index: 1032;
}
.modal-loading .caption {
    margin: 2rem auto;
    color: #8fa0b2;
    text-align: center;
    text-transform: uppercase;
}
.modal-loading .animation {
    position: relative;
    width: 1rem;
    margin: 0rem auto;
}
.modal-loading .animation:before, .modal-loading .animation:after {
    content:"";
    width: 3rem;
    height: 3rem;
    border-radius: 3rem;
    -moz-transform-origin: center 50%;
    -ms-transform-origin: center 50%;
    -webkit-transform-origin: center 50%;
    transform-origin: center 50%;
    position: absolute;
    left: -65px;
    top: 0rem;
}
.modal-loading .animation:before {
    background-color: #06839f;
    -webkit-animation: loading_circles 1.6s infinite linear;
    -moz-animation: loading_circles 1.6s infinite linear;
    -o-animation: loading_circles 1.6s infinite linear;
    animation: loading_circles 1.6s infinite linear;
}
.modal-loading .animation:after {
    background-color: #e73e50;
    -webkit-animation: loading_circles 1.6s 0.8s infinite linear;
    -moz-animation: loading_circles 1.6s 0.8s infinite linear;
    -o-animation: loading_circles 1.6s 0.8s infinite linear;
    animation: loading_circles 1.6s 0.8s infinite linear;
}
.modal-loading-backdrop {
    content:"";
    background-color: #000000;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1030;
    opacity: 0.5;
}
@-webkit-keyframes loading_circles {
    0% {
        -moz-transform: translateX(0) scale(1);
        -ms-transform: translateX(0) scale(1);
        -webkit-transform: translateX(0) scale(1);
        transform: translateX(0) scale(1);
        z-index: 2;
    }
    25% {
        -moz-transform: translateX(45px) scale(1.3);
        -ms-transform: translateX(45px)...