JSFiddle - React, Tailwind, and code Playground

by andrewray

HTML

<div class="loading">
    <div class="toes"></div>
</div>

SCSS

$green:#8fbe00;

.loading {
    $animation_time:1.0s;
    width:43px;
    height:74px;
    background:url(/images/foot-loader.png) 0 0 no-repeat;
    width: 93px;
    height: 94px;
    background: #000 url(http://andrewray.me/stuff/foot-loader.png) 50% 70% no-repeat;
    position:relative;
    border-radius:14px;

    > .toes, > .toes:after, >.toes:before {
        position: absolute;
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        border-radius: 10px;
        background: #fff;
        animation-duration: $animation_time;
        animation-name:pad1;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-timing-function: linear;
        -webkit-animation-duration: $animation_time;
        -webkit-animation-name:pad1;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-direction:alternate;
        -webkit-animation-timing-function: linear;
    }

    > .toes {
        top: 4px;
        left: 33px;
        animation-delay:( -$animation_time * 2 * ( 1 / 3 ));
        -webkit-animation-delay: 0.3s;
    }

    > .toes:before {
        top: 21px;
        left: -20px;
    }

    > .toes:after {
        top: 16px;
        left: 27px;
        animation-delay:( -$animation_time * 2 * ( 2 / 3 ));
        -webkit-animation-delay: 0.6s;
    }

}

@-webkit-keyframes pad1 {
    0% { background-color:lighten($green, 15%); }
    60% { background-color:darken($green, 15%); }
    100% { background-color:darken($green, 15%); }
}
@keyframes pad1 {
    from { background-color:darken($green, 20%); }
    to { background-color:darken($green, 0%); }
}