Skip to content

Instantly share code, notes, and snippets.

@wizard04wsu
Created March 13, 2014 17:46
Show Gist options
  • Save wizard04wsu/9533259 to your computer and use it in GitHub Desktop.
Save wizard04wsu/9533259 to your computer and use it in GitHub Desktop.
CSS3 Loading Icon/Spinner
.load {
height:100px;
width:100px;
margin:0 auto;
position:relative;
-webkit-animation: rotation 1s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border:6px solid rgba(236,30,39,.25);
border-radius:100%;
}
.load:before {
content:"";
height:100%;
width:100%;
left:-6px;
top:-6px;
position:absolute;
display:block;
border-top:6px solid rgba(236,30,39,.9);
border-left:6px solid transparent;
border-bottom:6px solid transparent;
border-right:6px solid transparent;
border-radius:100%;
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment