<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <title>Chris's awesome loader</title>
 <!-- 
    IN THIS PEN WE:
    - added all the lines we need
    - each line's animation starts when the
      one above it ends
  -->
  <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>

			</g>
 
</svg>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.