JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<svg class="lds-curve-bars" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 230 230" preserveAspectRatio="xMidYMid">
<g transform="translate(115, 115)" width="0">
<circle id="circle_1" cx="0" cy="0" r="90" fill="none" stroke="#a0cde2" stroke-width="50" stroke-dasharray="282" transform="rotate(150)">

<animateTransform attributeName="transform" type="rotate" values="0 0 0;360 0 0" times="0;1" dur="2.25s" begin="0" repeatCount="indefinite"></animateTransform>
</circle>

<circle id="circle_2" cx="0" cy="0" r="90" fill="none" stroke="#edf2f8" stroke-width="30" stroke-dasharray="150 414 " transform="rotate(240)">
<animateTransform attributeName="transform" type="rotate" values="0 0 0;-360 0 0" times="0;1" dur="2.25s" begin="0" repeatCount="indefinite"></animateTransform>

</circle>

<circle id="circle_3" cx="0" cy="0" r="90" fill="none" stroke="#000f42" stroke-width="30" stroke-dasharray="180 385 " transform="rotate(95)">

<animateTransform attributeName="transform" type="rotate" values="0 0 0;360 0 0" times="0;1" dur="2s" begin="0" repeatCount="indefinite"></animateTransform>

</circle>

<circle id="circle_4" cx="0" cy="0" r="80.5" fill="none" stroke="#1bb2e7" stroke-width="11" stroke-dasharray="323 183 " transform="rotate(45)">

<animateTransform attributeName="transform" type="rotate" values="0 0 0;360 0 0" times="0;1" dur="1.75s" begin="0" repeatCount="indefinite"></animateTransform>
</circle>

<circle id="circle_7" cx="0" cy="0" r="50" fill="none" stroke="#bb252e" stroke-width="35" stroke-dasharray="157 157 " transform="rotate(120)">
<animateTransform attributeName="transform" type="rotate" values="0 0 0;-360 0 0" times="0;1" dur="2.75s" begin="0" repeatCount="indefinite">  
</animateTransform>
</circle>

<circle id="circle_6" cx="0" cy="0" r="49" fill="none" stroke="#d8494b" stroke-width="12" stroke-dasharray="103 205" transform="rotate(85)">
  <animateTransform attributeName="transform"...