JSFiddle - React, Tailwind, and code Playground

by Bacher

HTML

<div class="container">
    <div class="icon">
        <div class="block block1"></div>
        <div class="block block2"></div>
        <div class="block block3"></div>
        <div class="block block4"></div>
        <div class="block block5"></div>
        <div class="block block6"></div>
        <div class="block block7"></div>
        <div class="block block8"></div>
        <div class="block block9"></div>
        <div class="block block10"></div>
        <div class="block block11"></div>
        <div class="block block12"></div>
    </div>
</div>

CSS

.container {
    border: 1px solid black;
    width: 24px;
    height: 24px;
    padding: 4px;
}

.icon {
	position: relative;
	width: 24px;
	height: 24px;
}
    
@-webkit-keyframes myfade {
    from {opacity: 1;}
    to {opacity: 0.25;}
}
    
.block {
    width: 11%;
    height: 26%;
    background: #78889F;
    position: absolute;
    left: 44.5%;
    top: 37%;
    opacity: 0;
    -webkit-animation: myfade 1s linear infinite;
    border-radius: 50px;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.block1 {
	-webkit-transform: rotate(0deg) translate(0, -142%);
	-webkit-animation-delay: 0s;
}
.block2 {
	-webkit-transform: rotate(30deg) translate(0, -142%);
	-webkit-animation-delay: -0.9167s;
}
.block3 {
	-webkit-transform: rotate(60deg) translate(0, -142%);
	-webkit-animation-delay: -0.833s;
}
.block4 {
	-webkit-transform: rotate(90deg) translate(0, -142%);
	-webkit-animation-delay: -0.75s;
}
.block5 {
	-webkit-transform: rotate(120deg) translate(0, -142%);
	-webkit-animation-delay: -0.667s;
}
.block6 {
	-webkit-transform: rotate(150deg) translate(0, -142%);
	-webkit-animation-delay: -0.5833s;
}
.block7 {
	-webkit-transform: rotate(180deg) translate(0, -142%);
	-webkit-animation-delay: -0.5s;
}
.block8 {
	-webkit-transform: rotate(210deg) translate(0, -142%);
	-webkit-animation-delay: -0.41667s;
}
.block9 {
	-webkit-transform: rotate(240deg) translate(0, -142%);
	-webkit-animation-delay: -0.333s;
}
.block10 {
	-webkit-transform: rotate(270deg) translate(0, -142%);
	-webkit-animation-delay: -0.25s;
}
.block11 {
	-webkit-transform: rotate(300deg) translate(0, -142%);
	-webkit-animation-delay: -0.1667s;
}
.block12 {
	-webkit-transform: rotate(330deg) translate(0, -142%);
	-webkit-animation-delay: -0.0833s;
}