Skip to content

Instantly share code, notes, and snippets.

@vonWolfehaus
Created September 11, 2015 22:33
Show Gist options
  • Save vonWolfehaus/8d201d14cbdae17e6b19 to your computer and use it in GitHub Desktop.
Save vonWolfehaus/8d201d14cbdae17e6b19 to your computer and use it in GitHub Desktop.
$spinner-size = 60px;
$spinner-line-size = 3px;
$spinner-duration = 1500ms;
$color-accent = #1e76e3;
.spinner {
position: relative;
min-width: $spinner-size;
min-height: $spinner-size;
}
.spinner:before {
content: 'Loading…';
position: absolute;
top: 0;
left: 0;
width: $spinner-size;
height: $spinner-size;
margin-top: -($spinner-line-size / 2);
margin-left: -($spinner-line-size / 2);
}
.spinner:not(:required):before {
content: '';
border-radius: 50%;
border-top: $spinner-line-size solid $color-accent;
border-right: $spinner-line-size -1 solid $color-accent;
border-bottom: $spinner-line-size solid transparent;
animation: spinner__container-rotate $spinner-duration linear infinite;
}
@keyframes spinner__container-rotate {
to { transform: rotate(360deg) }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment