<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <title>Chris's awesome loader</title>
 <!-- 
    IN THIS PEN WE:
    - added our first <animate> element
    - updated rect width to start at 0
  -->
  
  <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>
  </g>
  
  	
</svg>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.