JSFiddle - React, Tailwind, and code Playground

by Farzad Cyrus

HTML

<div class="animation-map-journey">
                        <div class='bar-outer right top b1'>
                            <div class='bar'></div>
                        </div>
                        <div class='bar-outer down-left b2'>
                            <div class='bar'></div>
                        </div>
                        <div class='bar-outer down-right b3'>
                            <div class='bar'></div>
                        </div>
                        <div class='bar-outer down-left b4'>
                            <div class='bar'></div>
                        </div>
                        <div class='bar-outer right bottom b5'>
                            <div class='bar'></div>
                        </div>
                        <div class='bar-outer up-left b6'>
                            <div class='bar'></div>
                        </div>
                        <div class='bar-outer up-right b7'>
                            <div class='bar'></div>
                        </div>
                        <div class='bar-outer up-left b8'>
                            <div class='bar'></div>
                        </div>
                    </div>

CSS

.animation-map-journey {
	position: absolute;
	top: 0;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: rotate(30deg) scale(1, 1);
	transform: rotate(30deg) scale(1, 1);
	width: 240px;
	height: 240px;
}

.bar-outer {
  -webkit-transform-origin: 5px 5px;
          transform-origin: 5px 5px;
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
}
.bar-outer.right {
  width: 94px;
}
.bar-outer.right .bar {
  background: #dd1133;
}
.bar-outer.down-right {
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
}
.bar-outer.down-right .bar {
}
.bar-outer.up-right {
  -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
}
.bar-outer.up-right .bar {}
.bar-outer.up-left {
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
}
.bar-outer.up-left .bar {
  -webkit-animation-name: ribbon-left;
          animation-name: ribbon-left;
}
.bar-outer.down-left {
  -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
}
.bar-outer.down-left .bar {
  -webkit-animation-name: ribbon-left;
          animation-name: ribbon-left;
}
.bar-outer .bar {
  width: 100px;
  height: 10px;
  border-radius: 1000px;
  background: #dd1133;
  position: absolute;
  top: 0;
  opacity: 0;
  -webkit-animation: ribbon 1.2s linear 0s infinite;
          animation: ribbon 1.2s linear 0s infinite;
}

.top.b1 { top: 0px; }
.top.b1 .bar { -webkit-animation-delay: 0s; animation-delay: 0s; }

.b2 { top: 31px; }
.b2 .bar { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }

.b3 { top: 31px; }
.b3 .bar { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }

.b4 { top: 93px; }
.b4 .bar { -webkit-animation-delay: 0.45s; animation-delay: 0.45s;}

.bottom.b5 { top: 93px; }
.bottom.b5 .bar { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }

.b6 { top: 62px; }
.b6 .bar { -webkit-animation-delay: 0.75s; animation-delay: 0.75s;}

.b7 { top: 62px; }
.b7 .bar { -webkit-animation-delay: 0.9s;...