JSFiddle - React, Tailwind, and code Playground

by adrianjmartin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
 <ul class="busy">
        <li class="busy-dot1"><b class="busy-dot-shine"></b></li>
        <li class="busy-dot2"><b class="busy-dot-shine"></b></li>
        <li class="busy-dot3"><b class="busy-dot-shine"></b></li>
        <li class="busy-dot4"><b class="busy-dot-shine"></b></li>
        <li class="busy-dot5"><b class="busy-dot-shine"></b></li>
</ul>

CSS

.busy {
            list-style: none;
            padding: 0;
            position: relative;
            transform-style: preserve-3d;
            animation: rot 4s linear infinite;
            width:100px;
        }

        .busy-dot1, .busy-dot2, .busy-dot3, .busy-dot4, .busy-dot5 {
            border-radius: 50%;
            display: inline-block;
            transform-style: preserve-3d;
            margin: 0 4px;
        }

        .busy-dot-shine {
            display: block;
            border-radius: 50%;
            background: radial-gradient(circle at 25% 25%, #FFF, rgba(255,255,255,0));
            background-color: #193987;
            animation: rotr 4s linear infinite;
            height: 20px;
            width: 20px;
        }

        @keyframes rot 
        {
            100% { transform: rotate(360deg) rotateY(360deg) rotateX(360deg); }
        }
        @keyframes rotr 
        {
            100% { transform: rotateX(-360deg) rotateY(-360deg) rotate(-360deg); }
        }