Instagram Stories Loader

HTML
<div class="circle"> <img src="https://en.gravatar.com/userimage/8283692/4c9d9ec1cd3fd02acb5ac9572e3583da?size=200" alt="" /> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="enable-background:new -580 439 577.9 194;" xml:space="preserve"> <circle cx="50" cy="50" r="40" /> </svg> </div>
LESS
body{ display:flex; align-items:center; justify-content:center; height:100vh; } .circle{ position:relative; width:100px; height:100px; svg{ fill:none; stroke:#8a3ab9; stroke-linecap: round; stroke-width:3; stroke-dasharray: 1; stroke-dashoffset: 0; animation: stroke-draw 6s ease-out infinite alternate; // animation: stroke-draw 6s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate; } img{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:70px; border-radius:50%; } } @keyframes stroke-draw { from{ stroke:#8a3ab9; stroke-dasharray: 1; } to{ stroke:#cd486b; transform:rotate(180deg); stroke-dasharray: 8; } }
JAVASCRIPT
Expand for more options Login