JSFiddle - React, Tailwind, and code Playground

by Ketan Patel

HTML

<body>
    <div class="content">
      <h3>CSS3 Loading animations</h3>
            <div class="load-1">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
        <div class="load-wrapp">
            
        </div>
        <div class="load-wrapp">
            <div class="load-2">
                <p>Loading 2</p>
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
        </div>
        <div class="load-wrapp">
            <div class="load-3">
                <p>Loading 3</p>
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
        </div>
        <div class="load-wrapp">
            <!-- Loading 4 don't work on firefox because of the border-radius and the "dashed" style. -->
            <div class="load-4">
                <p>Loading 4</p>
                <div class="ring-1"></div>
            </div>
        </div>
        <div class="load-wrapp">
            <div class="load-5">
                <p>Loading 5</p>
                <div class="ring-2">
                    <div class="ball-holder">
                        <div class="ball"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="load-wrapp">
            <div class="load-6">
                <p>Loading 6</p>
                <div class="letter-holder">
                    <div class="l-1 letter">L</div>
                    <div class="l-2 letter">o</div>
                    <div class="l-3 letter">a</div>
                    <div class="l-4 letter">d</div>
                    <div class="l-5 letter">i</div>
                    <div class="l-6 letter">n</div>
                    <div class="l-7 letter">g</div>
                    <div class="l-8 letter">.</div>
                   ...

CSS

/* =Animate the stuff
------------------------ */
.load-1 .line:nth-last-child(1) {animation: loadingA 1.5s 1s infinite;}
.load-1 .line:nth-last-child(2) {animation: loadingA 1.5s .5s infinite;}
.load-1 .line:nth-last-child(3) {animation: loadingA 1.5s 0s infinite;}

.load-2 .line:nth-last-child(1) {animation: loadingB 1.5s 1s infinite;}
.load-2 .line:nth-last-child(2) {animation: loadingB 1.5s .5s infinite;}
.load-2 .line:nth-last-child(3) {animation: loadingB 1.5s 0s infinite;}

.load-3 .line:nth-last-child(1) {animation: loadingC .6s .1s linear infinite;}
.load-3 .line:nth-last-child(2) {animation: loadingC .6s .2s linear infinite;}
.load-3 .line:nth-last-child(3) {animation: loadingC .6s .3s linear infinite;}