<html>
<head>
<style>
#recta1 {
animation: example 4s infinite;
}
@keyframes example {
0% {width:100px; x:200;}
50% {width:300px; x:100;}
100% {width:100px; x:200;}
}
</style>
</head>
<body>
<svg id="loading1" expanded = "true" height = "100px" width = "100px" onclick="document.getElementById('loading1').style.display='none'">
<circle cx = "50%" cy = "50%" r = "35%" stroke = "#999" stroke-width = "3%" fill = "none"/>
<circle cx = "50%" cy = "50%" r = "25%" fill = "#555">
<animate attributeName="r" begin="0ms" dur="1s" repeatCount="indefinite" from="5%" to="25%" />
<animate attributeName="r" begin="1s" dur="1s" repeatCount="indefinite" from="25%" to="5%" />
<animate attributeName="r" begin="2s" dur="1s" repeatCount="indefinite" from="5%" to="25%" />
<animate attributeName="fill" begin="3s" dur="1s" repeatCount="indefinite" to="#FAA" fill="freeze" />
</circle>
</svg>
<br>
<svg height="100" width="100">
<circle cx="50" cy="50" r="45" stroke="black" stroke-width="1" fill="#8BF"/>
</svg>
<br>
<div id="loading3" align="center" onclick="document.getElementById('loading3').style.display='none'">
<svg width="400" height="200">
<rect id="recta1" width="200" height="100" x="10" y="50" rx="50" ry="50" stroke="#050" stroke-width="1" fill="lime" />
</svg>
</div>
</body>
</html>