Skip to content

Instantly share code, notes, and snippets.

@stidges
Last active August 29, 2015 14:01
Show Gist options
  • Save stidges/0a2b0189403f2785c97b to your computer and use it in GitHub Desktop.
Save stidges/0a2b0189403f2785c97b to your computer and use it in GitHub Desktop.
Simple single-element spinner using CSS3 animations
body {
background-color: #d6e0e6;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
margin-left: -21.5px;
margin-top: -21.5px;
width: 40px;
height: 40px;
border-radius: 80px;
border: 3px solid transparent;
border-left-color: rgba(90, 126, 150, 0.2);
border-right-color: rgba(90, 126, 150, 0.2);
animation: spinnit 1s linear infinite;
}
.spinner:after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 30px;
height: 30px;
border-radius: 60px;
border: 3px solid transparent;
border-left-color: rgba(90, 126, 150, 0.5);
border-right-color: rgba(90, 126, 150, 0.5);
animation: spinnit 0.5s linear infinite reverse;
}
.spinner:before {
content: "";
position: absolute;
top: 7px;
left: 7px;
width: 20px;
height: 20px;
border-radius: 40px;
border: 3px solid transparent;
border-left-color: rgba(90, 126, 150, 0.8);
border-right-color: rgba(90, 126, 150, 0.8);
}
@keyframes spinnit {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="spinner"></div>
$outer-spinner-size: 40px;
$inner-spinner-size: 30px;
$center-spinner-size: 20px;
$border-width: 3px;
$core-spinner-color: #5A7E96;
@mixin make-spinner($size, $border-opacity) {
width: $size;
height: $size;
border-radius: $size * 2;
border: $border-width solid transparent;
border-left-color: rgba($core-spinner-color, $border-opacity);
border-right-color: rgba($core-spinner-color, $border-opacity);
}
@mixin offset-inner($inner-size) {
$offset: ((($outer-spinner-size - $inner-size) / 2) - $border-width);
top: $offset;
left: $offset;
}
body {
background-color: lighten($core-spinner-color, 40%);
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
margin-left: -(($outer-spinner-size + $border-width) / 2);
margin-top: -(($outer-spinner-size + $border-width) / 2);
@include make-spinner($outer-spinner-size, 0.2);
animation: spinnit 1s linear infinite;
}
.spinner:after {
content: "";
position: absolute;
@include offset-inner($inner-spinner-size);
@include make-spinner($inner-spinner-size, 0.5);
animation: spinnit 0.5s linear infinite reverse;
}
.spinner:before {
content: "";
position: absolute;
@include offset-inner($center-spinner-size);
@include make-spinner($center-spinner-size, 0.8);
}
@keyframes spinnit {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment