@loader-size: 100px;
@loader-half-size: @loader-size / 2;
@loader-animation-duration: 3s;
@loader-border-width: 5px;
@loader-color-gray: #E1E1E1;
@loader-color-red: crimson;

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

@keyframes loader-animation-half-right {
    0% {
        transform: rotate(-180deg);
    }
    
    50%, 100% {
        transform: rotate(0deg);
    }
}

@keyframes loader-animation-icon-one {
    0%, 19% {
        opacity: 1;
    }

    20%, 100% {
        opacity: 0;
    }
}

@keyframes loader-animation-icon-two {
    0%, 19%, 40%, 100% {
        opacity: 0;
    }

    20%, 39% {
        opacity: 1;
    }
}

@keyframes loader-animation-icon-three {
    0%, 39%, 60%, 100% {
        opacity: 0;
    }

    40%, 59% {
        opacity: 1;
    }
}

@keyframes loader-animation-icon-four {
    0%, 59%, 80%, 100% {
        opacity: 0;
    }
    
    60%, 79% {
        opacity: 1;
    }
}

@keyframes loader-animation-icon-five {
    0%, 79%, 100% {
        opacity: 0;
    }

    80%, 99% {
        opacity: 1;
    }
}

.Loader {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -@loader-half-size;
    margin-top: -@loader-half-size;
    height: @loader-size;
    width: @loader-size;
    border-radius: 100%;
    background: @loader-color-gray;
}

.Loader-whiteOverlay {
    position: absolute;
    height: @loader-size - 2 * @loader-border-width;
    width: @loader-size - 2 * @loader-border-width;
    top: @loader-border-width;
    left: @loader-border-width;
    background: white;
    border-radius: 100%;
}

.Loader-half {
    position: absolute;
    top: 0;
    left: 0;
    height: @loader-size;
    width: @loader-half-size;
    overflow: hidden;
}

.Loader-half--right {
    left: @loader-half-size;
}

.Loader-half:before {
    height: inherit;
    width: inherit;
    position: absolute;
    content: "";
    border-radius: @loader-half-size 0 0 @loader-half-size;
    background-color: @loader-color-red;
    transform-origin: center right;
    transform: rotate(180deg);
    animation: loader-animation-half @loader-animation-duration linear infinite;
}

.Loader-half--right:before {
    transform: rotate(-180deg);
    transform-origin: center left;
    border-radius: 0 @loader-half-size @loader-half-size 0;
    animation: loader-animation-half-right @loader-animation-duration linear infinite;
}

.Loader-icon {
    position: absolute;
    opacity: 0;
    animation-duration: @loader-animation-duration;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
        display: block;
    }
}

.Loader-icon--1 {
    animation-name: loader-animation-icon-one;
}

.Loader-icon--2 {
    animation-name: loader-animation-icon-two;
    height: inherit;
    width: inherit;
}

.Loader-icon--3 {
    animation-name: loader-animation-icon-three;
    height: inherit;
    width: inherit;
}

.Loader-icon--4 {
    animation-name: loader-animation-icon-four;
    height: inherit;
    width: inherit;
}

.Loader-icon--5 {
    animation-name: loader-animation-icon-five;
}

.Loader-icon--2>svg,
.Loader-icon--3>svg,
.Loader-icon--4>svg,
    {
      height: @loader-size;
      width: @loader-size;
      padding: 34px;
}