JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<div id="cont">
    <div id="bar1"></div>
    <div id="bar15"></div>
    <div id="bar2"></div>
    <div id="bar25"></div>
    <div id="bar3"></div>
    <div id="bar35"></div>
    <div id="bar4"></div>
    <div id="bar45"></div>
</div>

CSS

#cont {
    position: relative;
    height: 300px;
    width: 300px;
    
}

#cont div {
    position: absolute;
    top: 0;
    left: 25px;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background: #000;
    
    -webkit-animation-name: rotateThis;
    -webkit-animation-duration:0.4s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
}
    
#bar1 {
    -webkit-animation-delay: 0;
}
#bar15 {
    -webkit-transform: rotate(45deg) translate(14px, -5px);
    -webkit-animation-delay: 0.05s;
}
#bar2 {
    -webkit-transform: rotate(90deg) translate(20px, -20px);
    -webkit-animation-delay: 0.1s;
}
#bar25 {
    -webkit-transform: rotate(135deg) translate(14px, -33px);
    -webkit-animation-delay: 0.15s;
}
#bar3 {
    -webkit-transform: rotate(180deg) translate(0, -40px);
    -webkit-animation-delay: 0.2s;
}
#bar35 {
    -webkit-transform: rotate(225deg) translate(-14px, -33px);
    -webkit-animation-delay: 0.25s;
}
#bar4 {
    -webkit-transform: rotate(270deg) translate(-20px, -20px);
    -webkit-animation-delay: 0.3s;
}
#bar45 {
    -webkit-transform: rotate(315deg) translate(-14px, -5px);
    -webkit-animation-delay: 0.35s;
}

@-webkit-keyframes rotateThis {
    from { 
        opacity: 1;
    }
    to { 
        opacity: 0.2;
    }
}