Skip to content

Instantly share code, notes, and snippets.

@zspecza

zspecza/index.html

Created February 11, 2013 21:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zspecza/4757929 to your computer and use it in GitHub Desktop.
Save zspecza/4757929 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Declan de Wet. One Div CSS3 Animated Spinner - A futuristic HUD style animated loading spinner. Makes extensive use of keyframes. The intricate detailing is with thanks to CSS3 and it's :after and :before pseudo-elements. Strange case with this one is that it doesn't work as intended in Chrome. Feel free to contribute something to m…
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Futuristic HUD single-div no-image CSS3 loading spinner" />
<title>CSS3 Loading Spinner</title>
</head>
<body>
<div id="spinner"></div>
</body>
</html>
Raw
style.css
body {
background: #333;
overflow: hidden;
color: #fff;
text-align: center;
}
#spinner {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
height: 100px;
width: 100px;
background: none;
border-radius: 100px;
border-top: 15px solid cyan;
border-bottom: 15px solid cyan;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
-webkit-animation: spin 10s infinite alternate linear, glow 5s infinite alternate linear;
-moz-animation: spin 10s infinite alternate linear, glow 5s infinite alternate linear;
-ms-animation: spin 10s infinite alternate linear, glow 5s infinite alternate linear;
-o-animation: spin 10s infinite alternate linear, glow 5s infinite alternate linear;
animation: spin 10s infinite alternate linear, glow 5s infinite alternate linear;
}
#spinner:before {
content: "";
display: block;
width: 100%;
height: 100%;
padding: 15px;
background: none;
position: relative;
top: -30px;
left: -30px;
z-index: -1;
border-radius: 115px;
border: 15px solid cyan;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
-webkit-animation: spin2 5s infinite alternate linear, glow 3s infinite alternate linear;
-moz-animation: spin2 5s infinite alternate linear, glow 3s infinite alternate linear;
-ms-animation: spin2 5s infinite alternate linear, glow 3s infinite alternate linear;
-o-animation: spin2 5s infinite alternate linear, glow 3s infinite alternate linear;
animation: spin2 5s infinite alternate linear, glow 3s infinite alternate linear;
}
#spinner:after {
content: "";
display: block;
width: 100%;
height: 100%;
padding: 30px;
background: none;
position: relative;
top: -205px;
left: -45px;
z-index: -2;
border-radius: 130px;
border: 15px solid cyan;
border-left: 15px solid transparent;
border-bottom: 15px solid transparent;
-webkit-animation: spin 2s infinite alternate ease both, glow 10s infinite alternate linear;
-moz-animation: spin 2s infinite alternate ease both, glow 10s infinite alternate linear;
-ms-animation: spin 2s infinite alternate ease both, glow 10s infinite alternate linear;
-o-animation: spin 2s infinite alternate ease both, glow 10s infinite alternate linear;
animation: spin 2s infinite alternate ease both, glow 10s infinite alternate linear;
}
@keyframes "spin" {
0% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes "spin" {
0% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-ms-keyframes "spin" {
0% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-o-keyframes "spin" {
0% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes "spin2" {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spin2 {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes "spin2" {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes "spin2" {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes "spin2" {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes "glow" {
0% {
-webkit-box-shadow: none;
box-shadow: none;
}
50% {
-webkit-box-shadow: 10px -10px 30px cyan, -10px 10px 30px cyan;
box-shadow: 10px -10px 30px cyan, -10px 10px 30px cyan;
}
100% {
-webkit-box-shadow: none;
box-shadow: none;
}
}
@-moz-keyframes glow {
0% {
box-shadow: none;
}
50% {
box-shadow: 10px -10px 30px cyan, -10px 10px 30px cyan;
}
100% {
box-shadow: none;
}
}
@-webkit-keyframes "glow" {
0% {
-webkit-box-shadow: none;
box-shadow: none;
}
50% {
-webkit-box-shadow: 10px -10px 30px cyan, -10px 10px 30px cyan;
box-shadow: 10px -10px 30px cyan, -10px 10px 30px cyan;
}
100% {
-webkit-box-shadow: none;
box-shadow: none;
}
}
@-ms-keyframes "glow" {
0% {
box-shadow: none;
}
50% {
box-shadow: 10px -10px 30px cyan, -10px 10px 30px cyan;
}
100% {
box-shadow: none;
}
}
@-o-keyframes "glow" {
0% {
box-shadow: none;
}
50% {
box-shadow: 10px -10px 30px cyan, -10px 10px 30px cyan;
}
100% {
box-shadow: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment