:root {
    --min-size: 2px;
    --max-size: 40px;
}

.backdrop {
    display: none;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background: linear-gradient(45deg, rgba(255,255,255,.85), rgba(255,255,255,.85));
    /*background: rgba(35,213,219,.7);
    background: -moz-linear-gradient(-45deg, rgba(35,213,219,.7), rgba(69,142,255,.7) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(35,213,219,.7) 0%, rgba(69,142,255,.7) 100%);
    background: linear-gradient(135deg, rgba(35,213,219,.7) 0%, rgba(69,142,255,.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(35,213,219,.7)', endColorstr='rgba(69,142,255,.7)', GradientType=1);*/
    position: fixed;
    top:0;
    z-index: 99999;
}
.backdrop.active{
    display: flex;
}
.loader {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dot {
    background-image: url('/images/svg/sprinter.svg');
    width:40px;
    height:40px;
    margin: 5px;
    animation-name: loader;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.dot:nth-child(1) {
    animation-delay: 0.2s;
}
.dot:nth-child(2) {
    animation-delay: 0.4s;
}
.dot:nth-child(3) {
    animation-delay: 0.6s;
}
.dot:nth-child(4) {
    animation-delay: 0.8s;
}
.dot:nth-child(5) {
    animation-delay: 1s;
}

@keyframes loader {
    from {
        width: var(--min-size);
        height: var(--min-size);
        border-radius: calc(var(--min-size) / 2);
    }
    to {
        width: var(--max-size);
        height: var(--max-size);
        border-radius: calc(var(--max-size) / 2);
    }
}