JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="loading">
    <div class="dot"></div> <span>Loading</span>
</div>

CSS

body{
    background:#333;
    padding:20px;
}
#loading{
    width:70px;
    height:20px;
    position:relative;
    color: #fff;
    font-family: arial;
    text-transform: uppercase;
    font-size: 11px;
    text-shadow: 0 1px 1px #000;
}
#loading span{
    position: relative;
    top: 2px;
    left: 5px;
}
#loading .dot{
    background:#fff;
    width:5px;
    height:5px;
    border-radius:5px;
    display:inline-block;
    -webkit-box-shadow: 0 1px 1px #000, 0 0 10px #fff;
    box-shadow: 0 1px 1px #000, 0 0 10px #fff;
    
    -webkit-animation: glow 2s infinite; /* Saf5, Chrome */
     -moz-animation: glow 2s infinite; /* FF5+ */
      -ms-animation: glow 2s infinite; /* IE10 */
       -o-animation: glow 2s infinite; /* Opera 12+ */
}

@-webkit-keyframes glow {
  0%   { -webkit-box-shadow: 0 1px 1px #000, 0 0 0px #fff; }
  50%  { -webkit-box-shadow: 0 1px 1px #000, 0 0 10px #fff; }
  100% { -webkit-box-shadow: 0 1px 1px #000, 0 0 0px #fff; }
}
@-moz-keyframes glow {
  0%   { box-shadow: 0 1px 1px #000, 0 0 0px #fff; }
  50%  { box-shadow: 0 1px 1px #000, 0 0 10px #fff; }
  100% { box-shadow: 0 1px 1px #000, 0 0 0px #fff; }
}
@-ms-keyframes glow {
  0%   { box-shadow: 0 1px 1px #000, 0 0 0px #fff; }
  50%  { box-shadow: 0 1px 1px #000, 0 0 10px #fff; }
  100% { box-shadow: 0 1px 1px #000, 0 0 0px #fff; }
}
@-o-keyframes glow {
  0%   { box-shadow: 0 1px 1px #000, 0 0 0px #fff; }
  50%  { box-shadow: 0 1px 1px #000, 0 0 10px #fff; }
  100% { box-shadow: 0 1px 1px #000, 0 0 0px #fff; }
}