JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loadingScreen">
  <div>
  <b>Loading .....</b>
  </div>
</div>

CSS

.loadingScreen {
    width: 1001px;
    height: 100px;
   animation: fade 3s ease-in-out infinite;
    background-color:rgba(242, 245, 169, 1);
    opacity:1;
}
div {
    text-align:justify;
    width: 1001px;
    height: 100px;
    
    background-color:rgba(242, 245, 169, 1);
    opacity:1;
}

@keyframes fade {
        
from {width:0px;height:100px;border:5px double red;
  background-color:rgba(242, 245, 169, 1);}
to {border:3px double red;background-color:rgba(242, 245, 169, 1);}
}



@keyframes fadeDiv {
        
1% {width:0px;height:0px;opacity:0.1;
  background-color:rgba(242, 245, 169, 1);}
50%{
  {width:0px;height:0px;opacity:1;
  background-color:rgba(242, 245, 169, 1);
}
100% {opacity:0.1;
  width:0px;height:0px;background-color:rgba(242, 245, 169, 1);}
}