* {
    padding: 0;
    margin: 0;
}

.preloader {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 1;
    background-color: white;
    transition: 1s all;
    visibility: visible;
    z-index: 100;
}

.done {
    opacity: 0;
    visibility: hidden;
}

.loader {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: loader 1.4s infinite linear;
}

.loader span {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: 4px solid #ff0088;
    border-radius: 50%;
}

.loader span:nth-child(1) {
    animation: span-1 1.4s ease-in-out infinite;
}

.loader span:nth-child(2) {
    animation: span-2 1.4s ease-in-out infinite;
}

.loader span:nth-child(3) {
    animation: span-3 1.4s ease-in-out infinite;
}

.loader span:nth-child(4) {
    animation: span-4 1.4s ease-in-out infinite;
}

@keyframes loader {
    0% {
        transform:translate(-50%, -50%) rotate(0deg)
    }
    50%{
        transform:translate(-50%, -50%) rotate(180deg);
    }
    100%{
        transform:translate(-50%, -50%) rotate(360deg)
    }
}

@keyframes span-1 {
    0% {
        transform:translate(0);
    }
    50%{
        transform:translate(-40%, 0);
        border-color:#ff7b00;
    }
    100%{
        transform:translate(0);
    }
}

@keyframes span-2 {
    0%{
        transform:translate(0);
    }
    50%{
        transform:translate(40%, 0);
        border-color:#ff7b00;
    }
    100%{
        transform:translate(0);
    }
}

@keyframes span-3 {
    0%{
        transform:translate(0);
    }
    50%{
        transform:translate(0, -40%);
        border-color:#a600ff;
    }
    100%{
        transform:translate(0);
    }
}

@keyframes span-4 {
    0%{
        transform:translate(0);
    }
    50%{
        transform:translate(0, 40%);
        border-color:#a600ff;
    }
    100%{
        transform:translate(0);
    }
}