:root {
    --loader-base-size: 50px;
    --loader-base-offset: 20px;
    --loader-div-base-width: 15px;
    --loader-div-base-height: 0px;
    --loader-div-height-multiplier: 10px;
}
.loader,
.loader div {
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
}
.loader {
    position: relative;
    width: calc(2 * var(--loader-base-size));
    height: var(--loader-base-size);
}
.loader div {
    position: absolute;
    width: var(--loader-div-base-width);
    border: 1px solid white;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.loader div:nth-child(1) {
    left: calc(var(--loader-base-offset) * 0);
    border-top-right-radius: var(--border-radius);
    height: calc(var(--loader-div-base-height) + calc(0 * var(--loader-div-height-multiplier)));
    animation-name: loader1;
    background: var(--tides-color-one);
}
.loader div:nth-child(2) {
    left: calc(var(--loader-base-offset) * 1);
    border-top-right-radius: var(--border-radius);
    height: calc(var(--loader-div-base-height) + calc(1 * var(--loader-div-height-multiplier)));
    animation-name: loader2;
    background: var(--tides-color-two);
}
.loader div:nth-child(3) {
    left: calc(var(--loader-base-offset) * 2);
    height: calc(var(--loader-div-base-height) + calc(2 * var(--loader-div-height-multiplier)));
    animation-name: loader3;
    background: var(--tides-color-three);
}
.loader div:nth-child(4) {
    left: calc(var(--loader-base-offset) * 3);
    border-top-left-radius: var(--border-radius);
    height: calc(var(--loader-div-base-height) + calc(3 * var(--loader-div-height-multiplier)));
    animation-name: loader4;
    background: var(--tides-color-four);
}
.loader div:nth-child(5) {
    left: calc(var(--loader-base-offset) * 4);
    border-top-left-radius: var(--border-radius);
    height: calc(var(--loader-div-base-height) + calc(4 * var(--loader-div-height-multiplier)));
    animation-name: loader5;
    background: var(--tides-color-five);
}
@keyframes loader1 {
    0% { height: calc(var(--loader-div-base-height) + calc(0 * var(--loader-div-height-multiplier))); }
    50% { height: calc(var(--loader-div-base-height) + calc(4 * var(--loader-div-height-multiplier))); }
    100% { height: calc(var(--loader-div-base-height) + calc(0 * var(--loader-div-height-multiplier))); }
}
@keyframes loader2 {
    0% { height: calc(var(--loader-div-base-height) + calc(1 * var(--loader-div-height-multiplier))); }
    12.5% { height: calc(var(--loader-div-base-height) + calc(0 * var(--loader-div-height-multiplier))); }
    62.5% { height: calc(var(--loader-div-base-height) + calc(4 * var(--loader-div-height-multiplier))); }
    100% { height: calc(var(--loader-div-base-height) + calc(1 * var(--loader-div-height-multiplier))); }
}
@keyframes loader3 {
    0% { height: calc(var(--loader-div-base-height) + calc(2 * var(--loader-div-height-multiplier))); }
    25% { height: calc(var(--loader-div-base-height) + calc(0 * var(--loader-div-height-multiplier))); }
    75% { height: calc(var(--loader-div-base-height) + calc(4 * var(--loader-div-height-multiplier))); }
    100% { height: calc(var(--loader-div-base-height) + calc(2 * var(--loader-div-height-multiplier))); }
}
@keyframes loader4 {
    0% { height: calc(var(--loader-div-base-height) + calc(3 * var(--loader-div-height-multiplier))); }
    37.5% { height: calc(var(--loader-div-base-height) + calc(0 * var(--loader-div-height-multiplier))); }
    77.5% { height: calc(var(--loader-div-base-height) + calc(4 * var(--loader-div-height-multiplier))); }
    100% { height: calc(var(--loader-div-base-height) + calc(3 * var(--loader-div-height-multiplier))); }
}
@keyframes loader5 {
    0% { height: calc(var(--loader-div-base-height) + calc(4 * var(--loader-div-height-multiplier))); }
    50% { height: calc(var(--loader-div-base-height) + calc(0 * var(--loader-div-height-multiplier))); }
    100% { height: calc(var(--loader-div-base-height) + calc(4 * var(--loader-div-height-multiplier))); }
}