.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16em;
    height: 16em;
}

.loader-drops, .loader-fall-line, .loader-worm {
    animation-duration: 4s;
    animation-iteration-count: infinite;
    transform-origin: 64px 64px;
}

.loader-drops {
    animation-name: drops;
    animation-timing-function: ease-in-out;
    stroke-dasharray: 22 307.85 22;
    visibility: hidden;
    transform: rotate(90deg);
}

.loader-fall-line {
    animation-name: loader-fall-line-1;
    animation-timing-function: ease-in;
    stroke-dasharray: 1 112;
    stroke-dashoffset: 114;
}

.loader-fall-line-delay-1 {
    animation-name: loader-fall-line-2;
}

.loader-fall-line-delay-2 {
    animation-name: loader-fall-line-3;
}

.loader-fall-line-delay-3 {
    animation-name: loader-fall-line-4;
}

.loader-fall-line-delay-4 {
    animation-name: loader-fall-line-5;
}

.loader-ring {
    stroke: hsla(223, 90%, 95%, 0.1);
    transition: stroke 0.3s;
}

.loader-worm {
    animation-name: worm;
    stroke-dasharray: 43.98 307.87;
    stroke-dashoffset: -131.94;
    transform: rotate(-90deg);
}

@keyframes drops {
    from {
        animation-timing-function: steps(1, end);
        stroke-dasharray: 0 351.85 0;
        visibility: hidden;
    }
    25% {
        animation-timing-function: ease-in-out;
        stroke-dasharray: 0 351.85 0;
        visibility: visible;
    }
    26% {
        stroke-dasharray: 4 343.85 4;
    }
    27% {
        stroke-dasharray: 8 335.85 8
    }
    28% {
        stroke-dasharray: 12 327.85 12;
    }
    29% {
        animation-timing-function: ease-in;
        stroke-dasharray: 17 317.85 17;
    }
    32% {
        animation-timing-function: ease-out;
        stroke-dasharray: 25 301.85 25;
    }
    35%, 47.5% {
        animation-timing-function: linear;
        stroke-dasharray: 22 307.85 22;
        visibility: visible;
    }
    50% {
        animation-timing-function: steps(1, end);
        stroke-dasharray: 0 307.85 43.98;
        visibility: hidden;
    }
    75% {
        animation-timing-function: ease-in-out;
        stroke-dasharray: 0 351.85 0;
        visibility: visible;
    }
    76% {
        stroke-dasharray: 4 343.85 4;
    }
    77% {
        stroke-dasharray: 8 335.85 8
    }
    78% {
        stroke-dasharray: 12 327.85 12;
    }
    79% {
        animation-timing-function: ease-in;
        stroke-dasharray: 17 317.85 17;
    }
    82% {
        animation-timing-function: ease-out;
        stroke-dasharray: 25 301.85 25;
    }
    85%, 97.5% {
        animation-timing-function: linear;
        stroke-dasharray: 22 307.85 22;
        visibility: visible;
    }
    to {
        stroke-dasharray: 43.98 307.85 0;
        visibility: hidden;
    }
}

@keyframes loader-fall-line-1 {
    from, 15% {
        stroke-dashoffset: 114;
    }
    25%, 65% {
        stroke-dashoffset: 1;
    }
    75%, to {
        stroke-dashoffset: -112;
    }
}

@keyframes loader-fall-line-2 {
    from, 16% {
        stroke-dashoffset: 114;
    }
    26%, 66% {
        stroke-dashoffset: 1;
    }
    76%, to {
        stroke-dashoffset: -112;
    }
}

@keyframes loader-fall-line-3 {
    from, 17% {
        stroke-dashoffset: 114;
    }
    27%, 67% {
        stroke-dashoffset: 1;
    }
    77%, to {
        stroke-dashoffset: -112;
    }
}

@keyframes loader-fall-line-4 {
    from, 18% {
        stroke-dashoffset: 114;
    }
    28%, 68% {
        stroke-dashoffset: 1;
    }
    78%, to {
        stroke-dashoffset: -112;
    }
}

@keyframes loader-fall-line-5 {
    from, 19% {
        stroke-dashoffset: 114;
    }
    29%, 69% {
        stroke-dashoffset: 1;
    }
    79%, to {
        stroke-dashoffset: -112;
    }
}

@keyframes worm {
    from {
        animation-timing-function: ease-out;
        stroke-dasharray: 87.96 307.87;
        stroke-dashoffset: -131.94;
    }
    25% {
        animation-timing-function: steps(1);
        stroke-dasharray: 87.96 307.87;
        stroke-dashoffset: -307.86;
    }
    25.01% {
        animation-timing-function: ease-in;
        stroke-dasharray: 43.98 307.87;
        stroke-dashoffset: -307.86;
    }
    50% {
        animation-timing-function: steps(1);
        stroke-dasharray: 43.98 307.87;
        stroke-dashoffset: -175.92;
    }
    50.01% {
        animation-timing-function: ease-out;
        stroke-dasharray: 87.96 307.87;
        stroke-dashoffset: -131.94;
    }
    75% {
        animation-timing-function: steps(1);
        stroke-dasharray: 87.96 307.87;
        stroke-dashoffset: 43.98;
    }
    75.01% {
        animation-timing-function: ease-in;
        stroke-dasharray: 43.98 307.87;
        stroke-dashoffset: 0;
    }
    to {
        stroke-dasharray: 43.98 307.87;
        stroke-dashoffset: -131.94;
    }
}