JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loading">
  <span>ロ</span>
  <span>ー</span>
  <span>ド</span>
  <span>中</span>
  <span>で</span>
  <span>す</span>
  <span>・</span>
   <span>・</span>
   <span>・</span>
</div>

CSS

body {
	font-size: 100%;
	background: url(http://64.207.147.63/patterns/broken_noise.png);
	line-height: 1.5em;
	font-family: 'Orbitron', sans-serif;
}
.loading {
  margin: 5em 0;
	text-align: center;
}
.loading span {
	font-size: 2em;
	background: #fff;
	padding: 0 .2em;
	position: relative;
	visibility:hidden;
	text-shadow:0 1px 15px #1daebe, 0 -1px 15px #1daebe;
	-webkit-animation: load 3s ease-in-out;
	-webkit-animation-iteration-count:infinite;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.loading span:nth-of-type(1) {
	-webkit-animation-delay: 0s;
}
.loading span:nth-of-type(2) {
	-webkit-animation-delay: .2s;	
}
.loading span:nth-of-type(3) {
	-webkit-animation-delay: .4s;
}
.loading span:nth-of-type(4) {
	-webkit-animation-delay: .6s;
}
.loading span:nth-of-type(5) {
	-webkit-animation-delay: .8s;
}
.loading span:nth-of-type(6) {
	-webkit-animation-delay: 1s;
}
.loading span:nth-of-type(7) {
	-webkit-animation-delay: 1.2s;
}
.loading span:nth-of-type(8) {
	-webkit-animation-delay: 1.4s;
}
.loading span:nth-of-type(9) {
	-webkit-animation-delay: 1.6s;
}
@-webkit-keyframes load {
	0% {visibility:hidden;background:none;text-shadow: none;}
	50% {visibility:visible;background: #fff;text-shadow:0 1px 15px #1daebe, 0 -1px 15px #1daebe;}
	100% {visibility:hidden;background:none;text-shadow: none;}
}