Skip to content

Instantly share code, notes, and snippets.

@mike-gusiev
Created October 11, 2017 11:36
Show Gist options
  • Save mike-gusiev/284a325c9c0fc3e43d2ab1b2c1989128 to your computer and use it in GitHub Desktop.
Save mike-gusiev/284a325c9c0fc3e43d2ab1b2c1989128 to your computer and use it in GitHub Desktop.
<div class="loader">
<svg viewBox="0 0 32 32" width="32" height="32">
<circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>
</svg>
</div>
<style>
.loader {
left: 50%;
top: 50%;
position: fixed;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loader #spinner {
box-sizing: border-box;
stroke: #673AB7;
stroke-width: 3px;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment