JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d1">
        <canvas id="ci1" class="cc1" width="100" height="100"></canvas>
        <canvas id="ci2" class="cc2" width="100" height="100"></canvas>
        <canvas id="ci3" class="cc3" width="100" height="100"></canvas>
    </div>

CSS

#d1,#ci1,#ci2,#ci3{position:absolute;top:0px;left:0px}            

        .cc2{   -webkit-animation-duration: 1s; -webkit-animation-name: loading2w; -webkit-animation-iteration-count:infinite;  -moz-animation-duration: 1s; -moz-animation-name: loading2m; -moz-animation-iteration-count:infinite;   -o-animation-duration: 1s; -o-animation-name: loading2o; -o-animation-iteration-count:infinite;}
        .cc3{   -webkit-animation-duration: 1s; -webkit-animation-name: loading3w; -webkit-animation-iteration-count:infinite;  -moz-animation-duration: 1s; -moz-animation-name: loading3m; -moz-animation-iteration-count:infinite;   -o-animation-duration: 1s; -o-animation-name: loading3o; -o-animation-iteration-count:infinite;}            
        @-webkit-keyframes loading2w{
            0%{visibility:hidden;} 
            33%{visibility:hidden;} 
            33.33%{visibility:visible;} 
            100%{visibility:hidden;}   
        }
        @-moz-keyframes loading2m{
            0%{visibility:hidden;} 
            33%{visibility:hidden;} 
            33.33%{visibility:visible;} 
            100%{visibility:hidden;}   
        }
        @-o-keyframes loading2o{
            0%{visibility:hidden;} 
            33%{visibility:hidden;} 
            33.33%{visibility:visible;} 
            100%{visibility:hidden;}   
        }
        @-webkit-keyframes loading3w
        {
            0%{visibility:hidden;} 
            66.33%{visibility:hidden;} 
            66.67%{visibility:visible;} 
            100%{visibility:hidden;}   
        }
        @-moz-keyframes loading3m
        {
            0%{visibility:hidden;} 
            66.33%{visibility:hidden;} 
            66.67%{visibility:visible;} 
            100%{visibility:hidden;}   
        }
        @-o-keyframes loading3o
        {
            0%{visibility:hidden;} 
            66.33%{visibility:hidden;} 
            66.67%{visibility:visible;} 
            100%{visibility:hidden;}   
        }

JavaScript

var c10=document.getElementById("ci1");var ctx10=c10.getContext("2d");ctx10.fillStyle="#f00";ctx10.font="15pt Calibri";ctx10.fillText("Loading .",5,15);      
            var c10=document.getElementById("ci2");var ctx10=c10.getContext("2d");ctx10.fillStyle="#f00";ctx10.font="15pt Calibri";ctx10.fillText("               .",5,15);   
            var c10=document.getElementById("ci3");var ctx10=c10.getContext("2d");ctx10.fillStyle="#f00";ctx10.font="15pt Calibri";ctx10.fillText("                .",5,15);