<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>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.