loading.svg

loading.svg

<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
  <style type="text/css">
    rect { fill: #222; height: 24px; width: 24px; }
    #r0 { opacity: 0; animation: fade 0s 0s, spinner 0.85s 0s infinite; }
    #r1 { opacity: 0.125; animation: fade 0.10625s 0s, spinner 0.85s 0.10625s infinite; }
    #r2 { opacity: 0.25; animation: fade 0.2125s 0s, spinner 0.85s 0.2125s infinite; }
    #r3 { opacity: 0.375; animation: fade 0.31875s 0s, spinner 0.85s 0.31875s infinite; }
    #r4 { opacity: 0.5; animation: fade 0.425s 0s, spinner 0.85s 0.425s infinite; }
    #r5 { opacity: 0.625; animation: fade 0.53125s 0s, spinner 0.85s 0.53125s infinite; }
    #r6 { opacity: 0.75; animation: fade 0.6375s 0s, spinner 0.85s 0.6375s infinite; }
    #r7 { opacity: 0.875; animation: fade 0.74375s 0s, spinner 0.85s 0.74375s infinite; }
    @keyframes spinner { from { opacity: 1; } to { opacity: 0; } }
    @keyframes fade { to { opacity: 0; } }
  </style>

<rect id="r0" x="38" y="38" rx="24" ry="24" transform="rotate(0 50 50) translate(0 -38)"/>
<rect id="r1" x="38" y="38" rx="24" ry="24" transform="rotate(45 50 50) translate(0 -38)"/>
<rect id="r2" x="38" y="38" rx="24" ry="24" transform="rotate(90 50 50) translate(0 -38)"/>
<rect id="r3" x="38" y="38" rx="24" ry="24" transform="rotate(135 50 50) translate(0 -38)"/>
<rect id="r4" x="38" y="38" rx="24" ry="24" transform="rotate(180 50 50) translate(0 -38)"/>
<rect id="r5" x="38" y="38" rx="24" ry="24" transform="rotate(225 50 50) translate(0 -38)"/>
<rect id="r6" x="38" y="38" rx="24" ry="24" transform="rotate(270 50 50) translate(0 -38)"/>
<rect id="r7" x="38" y="38" rx="24" ry="24" transform="rotate(315 50 50) translate(0 -38)"/>
</svg>