JSFiddle - React, Tailwind, and code Playground

by micmic

CSS

@-webkit-keyframes 'mon_animation' {
    0% {
        height: 10px;
        margin-top: 25px;
    }
    50% {
        height:50px;
        margin-top: 0px;
    }
    100% {
        height: 10px;
        margin-top: 25px;
    }
}

JavaScript

$("body").append("<ul id='loader'><li></li><li></li><li></li><li></li><ul>");
$("body").css({
    "background-color": "#FEC3AC"
});
$("#loader").css({
    "position": "fixed",
        "margin": "0 auto",
        "left": "0",
        "right": "0",
        "top": "50%",
        "margin-top": "-30px",
        "width": "60px",
        "height": "60px",
        "list-style": "none"
});
$("#loader li").css({
    "background-color": "#ffffff",
        "width": "10px",
        "height": "10px",
        "float": "left",
        "margin-right": "5px"
    //"box-shadow": "0px 80px 20px rgba(0,0,0,0.2)"
});
$("#loader li:nth-child(1)").css({
    "-webkit-animation": "mon_animation 0.6s ease-in-out infinite 0"
});
$("#loader li:nth-child(2)").css({
    "-webkit-animation": "mon_animation 0.6s ease-in-out infinite -0.2s"
});
$("#loader li:nth-child(3)").css({
    "-webkit-animation": "mon_animation 0.6s ease-in-out infinite -0.4s"
});
$("#loader li:nth-child(4)").css({
    "-webkit-animation": "mon_animation 0.6s ease-in-out infinite -0.6s"
});