JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<div id="loader">Loading...</div>

CSS

body { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; }

#loader {
    background: #ddd;
    color: #333;
    border-radius: 4px;
    padding: 4px;
    display: inline-block;
    -webkit-box-shadow: 0 0 5px #333;
    box-shadow: 0 0 5px #333;
    
    -moz-animation-name: glow;
    -moz-animation-duration: .8s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -moz-animation-direction: alternate;

    -webkit-animation-name: glow;
    -webkit-animation-duration: .8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: alternate;
}

@-moz-keyframes glow {
    from { box-shadow: 0 0 5px #333; }
    to   { box-shadow: 0 0 10px #046; }
}
@-webkit-keyframes glow {
    from { -webkit-box-shadow: 0 0 5px #333; }
    to   { -webkit-box-shadow: 0 0 10px #046; }
}