.loader {
    transform: scale(.5);
    animation: bottom-ripple 1s ease-in-out infinite -50ms;
    background-color: #b32b3d;
    border-radius: 50%;
    box-shadow: 0 .5em .5em rgba(0, 0, 0, .4);
    height: 12em;
    position: relative;
    width: 12em
}

.loader::after,
.loader::before {
    border-radius: inherit;
    box-shadow: 0 .5em .5em rgba(0, 0, 0, .4);
    content: "";
    left: 50%;
    position: absolute;
    top: 50%
}

.loader::before {
    animation: middle-ripple 1s ease-in-out infinite -25ms;
    background-color: #da3148;
    height: 8em;
    margin: -4em 0 0 -4em;
    width: 8em
}

.loader::after {
    animation: top-ripple 1s ease-in-out infinite;
    background-color: #fe3e57;
    height: 4em;
    margin: -2em 0 0 -2em;
    width: 4em
}

@keyframes bottom-ripple {
    0% {
        box-shadow: 0 .5em .5em rgba(0, 0, 0, .4);
        transform: scale(1)
    }

    50% {
        box-shadow: 0 1.5em 1.5em rgba(0, 0, 0, .4);
        transform: scale(1.25)
    }
}

@keyframes middle-ripple {
    0% {
        box-shadow: 0 .5em .5em rgba(0, 0, 0, .4);
        transform: scale(1)
    }

    50% {
        box-shadow: 0 1.5em 1.5em rgba(0, 0, 0, .4);
        transform: scale(1.1)
    }
}

@keyframes top-ripple {
    0% {
        box-shadow: 0 .5em .5em rgba(0, 0, 0, .4);
        transform: scale(1)
    }

    50% {
        box-shadow: 0 1.5em 1.5em rgba(0, 0, 0, .4);
        transform: scale(1.4)
    }
}