JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">test</div>
  <div id='block' class='block'>
  <div class='dot'>
    <span></span>
    <span></span>
    <span></span>
  <div>
</div>

CSS

.block{
  padding: 15px;
  height: 20px;
  width: 70px;
  background-color: #E1E1E1;
  border-radius: 16px;
  border-bottom-left-radius: 0;
  display: inline-block;
}

@keyframes Myanim {
	0%{opacity:1;}
	20%{opacity:0.9;}
	40%{opacity:0.7;}
  100%{opacity:0.3;}
}

.dot span{
  transition: all 100ms ease;
  background: #666666;
  margin: 4px;
  height: 12px;
  width: 12px;  
  display: inline-block;
  border-radius: 6px;
  animation: Myanim 800ms infinite alternate;

}

.dot span:nth-child(1){  animation-delay: 0; }
.dot span:nth-child(2){  animation-delay: 300ms; }
.dot span:nth-child(3){  animation-delay: 600ms; }


#test{
  display: none;
}

JavaScript

var myVar;
function myFunction() {
    myVar = setTimeout(showPage, 2000);
}
myFunction();
function showPage() {
  document.getElementById("block").style.display = "none";
  document.getElementById("test").style.display = "table";
}