<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <title>Chris's awesome loader</title>
 <!-- 
    IN THIS PEN WE:
    - added a second line, slightly indented,
      similar to how a developer would indent
      their code
    - added our second animation, to begin when
      our first one ends
  -->
  <g id="group1">
    <rect id="line1"
          width="0" 
          height="20"
          fill="#3092ec"
          x="0" y="0" 
          rx="10" ry="10">
      <animate attributeName="width" 
               from="0" to="350" 
               dur="0.3s" 
               fill="freeze" 
               id="line1_anim" />
    </rect>
    <rect id="line2" 
          width="0" 
          height="20" 
          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>
  </g>
  
  	
</svg>