JSFiddle - React, Tailwind, and code Playground
by LuckyCat
HTML
<div id="dalbulat">
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
CSS
body {
background:#222;
}
#dalbulat {
background-color: #222;
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
z-index: 2;
border-radius: 110px;
text-align: center;
font-size:10px;
color:#ccc;
line-height: 90px;
}
#dalbulat span {
-webkit-animation:color 1.5s linear infinite;
-moz-animation:color 1.5s linear infinite;
-ms-animation:color 1.5s linear infinite;
-o-animation:color 1.5s linear infinite;
animation:color 1.5s linear infinite;
}
#dalbulat span:nth-child(1) {
-webkit-animation-delay:0s;
-moz-animation-delay:0s;
-ms-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;
}
#dalbulat span:nth-child(2) {
-webkit-animation-delay:.25s;
-moz-animation-delay:.25s;
-ms-animation-delay:.25s;
-o-animation-delay:.25s;
animation-delay:.25s;
}
#dalbulat span:nth-child(3) {
-webkit-animation-delay:.45s;
-moz-animation-delay:.45s;
-ms-animation-delay:.45s;
-o-animation-delay:.45s;
animation-delay:.45s;
}
#dalbulat span:nth-child(4) {
-webkit-animation-delay:.55s;
-moz-animation-delay:.55s;
-ms-animation-delay:.55s;
-o-animation-delay:.55s;
animation-delay:.55s;
}
#dalbulat span:nth-child(5) {
-webkit-animation-delay:.65s;
-moz-animation-delay:.65s;
-ms-animation-delay:.65s;
-o-animation-delay:.65s;
animation-delay:.65s;
}
#dalbulat span:nth-child(6) {
-webkit-animation-delay:.75s;
-moz-animation-delay:.75s;
-ms-animation-delay:.75s;
-o-animation-delay:.75s;
animation-delay:.75s;
}
#dalbulat span:nth-child(7) {
-webkit-animation-delay:.85s;
-moz-animation-delay:.85s;
-ms-animation-delay:.85s;
-o-animation-delay:.85s;
animation-delay:.85s;
}
@-webkit-keyframes color {
0% {
color:#fff;
}
50% {
color:transparent;
}
100% {
color:#fff;
}
}