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
Expand for more options Login