:root {
    --duration: 350ms;
}

html,
body {
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: lightseagreen;
}

.loader {
    height: 40px;
    width: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
}

.bar {
    height: 100%;
    width: 10px;
    border-radius: 10px;
    background-color: white;
    margin: 0 4px;
}

.bar:nth-of-type(2) {
    animation: load var(--duration) ease-in-out infinite alternate calc(var(--duration) / -2);
}

.bar:nth-of-type(1) {
    animation: load var(--duration) ease-in-out infinite alternate 0ms;
}

.bar:nth-of-type(3) {
    animation: load var(--duration) ease-in-out infinite alternate calc(var(--duration) * -1);
}

@keyframes load {
    from {
        transform: scaleY(1);
    }

    to {
        transform: scaleY(1.8);
    }
}