HTML
<svg id="spinner" viewbox="0 0 80 80" x="0px" xmlns=
"http://www.w3.org/2000/svg" y="0px">
<path d=
"M4.678,40.749v-0.335C4.678,20.937,20.524,5.092,40,5.092h0.336v3.365H40 c-17.621,0-31.958,14.334-31.958,31.957v0.335H4.678z"
fill="#28A8E0">
<animatetransform attributename="transform" attributetype="xml" dur="2.8s"
from="0 40 40" repeatcount="indefinite" to="-360 40 40" type=
"rotate"></animatetransform>
</path>
<path d=
"M40,70.688c-16.695,0-30.275-13.582-30.275-30.275v-0.336h3.363v0.336c0,14.838,12.073,26.913,26.912,26.913 h0.336v3.362H40z"
fill="#00A79C">
<animatetransform attributename="transform" attributetype="xml" dur="2.8s"
from="0 40 40" repeatcount="indefinite" to="360 40 40" type=
"rotate"></animatetransform>
</path>
<path d=
"M66.912,40.749v-0.335c0-14.84-12.071-26.912-26.912-26.912h-0.336v-3.364H40 c16.695,0,30.276,13.581,30.276,30.276v0.335H66.912z"
fill="#F15B2A">
<animatetransform attributename="transform" attributetype="xml" dur="2.8s"
from="0 40 40" repeatcount="indefinite" to="360 40 40" type=
"rotate"></animatetransform>
</path>
<path d=
"M39.664,65.644v-3.365H40c12.058,0,21.866-9.809,21.866-21.865v-0.336h3.364v0.336 c0,13.912-11.318,25.23-25.23,25.23H39.664z"
fill="#F69321">
<animatetransform attributename="transform" attributetype="xml" dur="2.8s"
from="0 40 40" repeatcount="indefinite" to="360 40 40" type=
"rotate"></animatetransform>
</path>
<path d=
"M14.771,40.749v-0.335c0-13.912,11.318-25.229,25.229-25.229h0.336v3.364H40 c-12.057,0-21.866,9.809-21.866,21.866v0.335H14.771z"
fill="#EB2227">
<animatetransform attributename="transform" attributetype="xml" dur="2.8s"
from="0 40 40" repeatcount="indefinite" to="360 40 40" type=
"rotate"></animatetransform>
</path>
<path d=
"M56.82,40.749v-0.335c0-9.274-7.545-16.819-16.82-16.819h-0.336v-3.365H40 c11.13,0,20.184,9.054,20.184,20.184v0.335H56.82z"
fill="#3BB34A">
<animatetransform attributename="transform" attributetype="xml" dur="2.8s"
from="0 40 40" repeatcount="indefinite" to="360 40 40" type=
"rotate"></animatetransform>
</path>
<path d=
"M40,60.598c-11.129,0-20.184-9.055-20.184-20.184v-0.336h3.364v0.336c0,9.275,7.544,16.821,16.819,16.821 h0.336v3.363H40z"
fill="#8CC541">
<animatetransform attributename="transform" attributetype="xml" dur="2.8s"
from="0 40 40" repeatcount="indefinite" to="360 40 40" type=
"rotate"></animatetransform>
</path>
<path d=
"M24.863,40.749v-0.335c0-8.348,6.792-15.138,15.137-15.138h0.336v3.364H40 c-6.492,0-11.773,5.281-11.773,11.774v0.335H24.863z"
fill="#90298D">
<animatetransform attributename="transform" attributetype="xml" dur="2.8s"
from="0 40 40" repeatcount="indefinite" to="360 40 40" type=
"rotate"></animatetransform>
</path>
<path d=
"M39.664,55.551v-3.363H40c6.491,0,11.773-5.281,11.773-11.774v-0.336h3.365v0.336 c0,8.347-6.793,15.137-15.139,15.137H39.664z"
fill="#D91F5D">
<animatetransform attributename="transform" attributetype="xml" dur="2.8s"
from="0 40 40" repeatcount="indefinite" to="-360 40 40" type=
"rotate"></animatetransform>
</path></svg>
1 Response