JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<span class="loader">
    <span></span>
</span>

SCSS

$dura: 750ms;

$m-blue: #3b6e98;
$m-orange: #fbac2a;

span.loader {
    background: #fff;
    width: 60px;
    height: 120px;
    display: inline-block;
    color: $m-orange;
    position: relative;
    font-family: Segoe UI;
    font-size: 24pt;
    background: $m-blue;
    box-shadow: 0 0 0 2px $m-orange;
    &::before {
        position: absolute;
        content: "M";
        bottom: 18pt;
        width: 100%;
        text-align: center;
        animation: bounce $dura ease infinite;
        transform-origin: left bottom;
    }
    &::after {
        position: absolute;
        content: "M";
        bottom: 0;
        width: 100%;
        text-align: center;
        animation: shadow $dura ease infinite;
    }
    span {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        text-align: center;
        display: inline-block;
        &::after {
            display: block;
            content: "";
            width: 20px;
            height: 1px;
            margin: 0 auto;
            margin-top: 155%;
            border-top: 1px dashed rgba(255,255,255,0.5);
            animation: splat $dura ease infinite;
        }
    }
}

@keyframes bounce {
    0% {
        transform: scaleY(0.75);
        text-shadow: 0 0 3px $m-orange;
    }
    50% {
        transform: translateY(-100%) scaleY(1.2);
        text-shadow: none;
    }
    100% {
        transform: scaleY(0.55);
        text-shadow: 0 0 5px $m-orange;
    }
}

@keyframes shadow {
    0% {
        -webkit-filter: blur(1px);
        opacity: 0.75;
        transform: scale(-1);
    }
    50% {
        -webkit-filter: blur(2px);
        opacity: 0.5;
        transform: scale(-1) translateY(-50%);
    }
    100% {
        -webkit-filter: blur(1px);
        opacity: 0.75;
        transform: scale(-1);
    }
}

@keyframes splat {
    0% {
        opacity: 0.5;
        transform: scale(1.8);
    }
    20% {
        opacity: 0;
        transform:...