Android-like loading SVG icon
HTML
<!doctype html>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<style type="text/css">
<![CDATA[
g { animation: rotate 2s linear infinite; }
circle:last-child { animation: spin 1.6s ease-in-out infinite; }
@keyframes rotate {
0% { transform: translate(32px,32px) rotate(0deg); }
100% { transform: translate(32px,32px) rotate(360deg); }
}
@keyframes spin {
0% { stroke-dasharray: 0,188.5; }
50% {
stroke-dasharray: 188.5,0;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 0,188.5;
stroke-dashoffset: -188.5;
}
}
]]>
</style>
<g fill="none" stroke-width="4" transform="translate(32,32) rotate(270 0 0)">
<circle stroke="lightgrey" r="30"/>
<circle stroke="crimson" r="30"/>
</g>
</svg>
CSS
svg {
height: 64px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 64px;
}
JAVASCRIPT
// No js!
// Why 188.5 for dasharray?
// We need a complete spin, so
// 2*π*r = 2*3.1416*30
