Skip to content

Instantly share code, notes, and snippets.

@ascott
Forked from anonymous/index.html
Created February 15, 2017 23:17
Show Gist options
  • Save ascott/eded3df0765d08bf501856d6e416c27d to your computer and use it in GitHub Desktop.
Save ascott/eded3df0765d08bf501856d6e416c27d to your computer and use it in GitHub Desktop.
minimal loading spinner
<div class="loading"></div>
$base-line-height: 24px;
$white: rgb(255,255,255);
$light-gray: rgba(#333, 0.15);
$spin-duration: .9s;
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
html {
height: 100%;
}
body {
@extend html;
display: flex;
justify-content: space-around;
align-items: center;
background: #ffffff;
}
.loading {
border-radius: 50%;
width: $base-line-height;
height: $base-line-height;
border: .25rem solid $light-gray;
border-top-color: #00A699;
animation: spin $spin-duration infinite linear;
&--double {
border-style: double;
border-width: .5rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment