JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<h1>CSS3 Loading Animation Loop</h1>

<div class="container">
    <div class="content">
        <div class="ball"></div>
        <div class="ball1"></div>
    </div>
</div>

<div class="container">
    <div class="content">
        <div class="circle"></div>
        <div class="circle1"></div>
    </div>
</div>

<div class="container">
    <div class="contentBar">
        <div id="block_1" class="barlittle"></div>
        <div id="block_2" class="barlittle"></div>
        <div id="block_3" class="barlittle"></div>
        <div id="block_4" class="barlittle"></div>
        <div id="block_5" class="barlittle"></div>
    </div>
</div>

<a class="trigger" href="#">Play/Stop Animation</a>

CSS

body {
    background: #161616 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAAAAACMmsGiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABdJREFUCB1jUlGRkWH6CQRMf//y8oJZAFUaCmUwcfODAAAAAElFTkSuQmCC) top left repeat;
    margin: 0;
    padding: 0;
    font: 14px normal Verdana, Arial, Helvetica, sans-serif;
    height: 100%;
}

* { margin: 0; padding: 0; outline: none; }

img { border: none; }

a {
    text-decoration:none;
    color:#00c6ff;
}

h1 {
    font: 2em normal Arial, Helvetica, sans-serif;
    padding: 10px;    margin: 0;
    text-align:center;
    color:#bbb;
}

h1 small{
    font: 0.3em normal  Arial, Helvetica, sans-serif;
    text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
    display: block;
}

.container {width: 350px; margin: 0 auto; overflow: hidden;}
.content {width:350px; margin:0 auto; padding-top:20px;}
.contentBar {width:90px; margin:0 auto; padding-top:20px; padding-bottom:60px;}

/* STOP ANIMATION */
.stop {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -ms-animation-play-state:paused;
}

/* Loading Circle */
.ball {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-top:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #2187e7;
    width:50px;
    height:50px;
    margin:0 auto;
    -webkit-animation:spin .5s infinite linear;
    -moz-animation:spin .5s infinite linear;
    -ms-animation:spin .5s infinite linear;
}

.ball1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-top:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #2187e7;
    width:30px;
    height:30px;
    margin:0 auto;
    position:relative;
    top:-50px;
    -webkit-animation:spinoff .5s infinite linear;
    -moz-animation:spinoff .5s infinite linear;
   ...

JavaScript

var ids = '.ball, .ball1, .circle, .circle1, .barlittle';
$(ids).removeClass('stop');
$('.trigger').click(function() {
    $(ids).toggleClass('stop');
});