<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<title>Chris's awesome loader</title>
<!--
IN THIS PEN WE:
- added a repeating animation to start a
"scroll" effect, looping every 2 seconds
-->
<g id="group1" y="0" x="0" visibility="visible">
<rect id="line1" width="50" height="20" style="fill:#3092ec" x="0" y="0" rx="10" ry="10">
<animate attributeName="width" from="50" to="350" dur="0.3s" fill="freeze" id="line1_anim" />
</rect>
<rect id="line2" width="0" height="20" style="fill:#ab6cfe" x="30" y="30" rx="10" ry="10">
<animate attributeName="width" from="0" to="200" dur="0.3s" fill="freeze" begin="line1_anim.end" id="line2_anim" />
</rect>
<rect id="line3" width="0" height="20" style="fill:#fd8085" x="60" y="60" rx="10" ry="10">
<animate attributeName="width" from="0" to="160" dur="0.3s" fill="freeze" begin="line2_anim.end" id="line3_anim" />
</rect>
<rect id="line4" width="0" height="20" style="fill:lightgrey" x="90" y="90" rx="10" ry="10">
<animate attributeName="width" from="0" to="200" dur="0.2s" fill="freeze" begin="line3_anim.end" id="line4_anim" />
</rect>
<rect id="line5" width="0" height="20" style="fill:lightgrey" x="90" y="120" rx="10" ry="10">
<animate attributeName="width" from="0" to="200" dur="0.2s" fill="freeze" begin="line4_anim.end" id="line5_anim" />
</rect>
<rect id="line6" width="0" height="20" style="fill:#fd8085" x="60" y="150" rx="10" ry="10">
<animate attributeName="width" from="0" to="120" dur="0.2s" fill="freeze" begin="line5_anim.end" id="line6_anim" />
</rect>
<rect id="line7" width="0" height="20" style="fill:#ab6cfe" x="30" y="180" rx="10" ry="10">
<animate attributeName="width" from="0" to="90" dur="0.2s" fill="freeze" begin="line6_anim.end" id="line7_anim" />
</rect>
<rect id="line8" width="0" height="20" style="fill:#3092ec" x="0" y="210" rx="10" ry="10">
<animate attributeName="width" from="50" to="130" dur="0.3s" fill="freeze" begin="line7_anim.end" id="line8_anim" />
</rect>
<animateMotion
from="0,0" to="0,-250"
dur="2s"
begin="line8_anim.end"
repeatCount="indefinite"/>
</g>
</svg>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.