Skip to content

Instantly share code, notes, and snippets.

@ScottKaye
Last active January 28, 2021 16:30
Show Gist options
  • Save ScottKaye/d1e9e72a2473346f8834 to your computer and use it in GitHub Desktop.
Save ScottKaye/d1e9e72a2473346f8834 to your computer and use it in GitHub Desktop.
.loader ellipse {
stroke-dasharray:10, 9999;
-webkit-animation:load 2s cubic-bezier(0.8,0.25,0.25,0.9) infinite, spin 2s linear infinite;
-webkit-transform-origin:center;
}
@-webkit-keyframes load {
50% {
stroke-dasharray:140;
stroke-dashoffset:0;
-webkit-transform:rotateZ(0deg);
}
100% {
stroke-dasharray:146;
stroke-dashoffset:-156;
}
}
@-webkit-keyframes spin {
to {
-webkit-transform:rotateZ(360deg);
}
}
<svg class="loader" width="60" height="60" xmlns="http://www.w3.org/2000/svg">
<g>
<ellipse ry="25" rx="25" cy="30" cx="30" stroke-width="5" stroke="#000" fill="none"/>
</g>
</svg>
@Finesse
Copy link

Finesse commented Nov 10, 2019

It's messed up in Safari

ezgif-2-608d2a0a0a0f

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment