Squircle :)

HTML
<div class="spinner"></div>
CSS
body { background: #9b59b6; margin: 0; overflow: hidden; } .spinner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; margin: auto; border: 20px solid white; animation: 2s waiting 0s linear infinite; } @keyframes waiting { 0% { border-radius: 0% 0% 50% 50%; transform: rotate(0deg); } 25% { border-radius: 50% 0% 0% 50%; } 50% { border-radius: 50% 50% 0% 0%; transform: rotate(-180deg); } 75% { border-radius: 0% 50% 50% 0%; } 100% { border-radius: 0% 0% 50% 50%; transform: rotate(-360deg); } }
JAVASCRIPT
Expand for more options Login