Skip to content

Instantly share code, notes, and snippets.

@brbcoding

brbcoding/index.html

Created August 22, 2014 21:15
Show Gist options
  • Save brbcoding/437f0efce14158df7b81 to your computer and use it in GitHub Desktop.
Save brbcoding/437f0efce14158df7b81 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Circular Spinner
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background: #2c3e50;
}
.spinner {
width: 0;
height: 0;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.ball {
display: inline-block;
width: 12px;
height: 12px;
margin: 6px;
background: #1abc9c;
border-radius: 50%;
position: absolute;
}
.ball:nth-child(1) {
-webkit-transform: translate3d(50px, 0px, 0);
transform: translate3d(50px, 0px, 0);
-webkit-animation: anim 0.5s infinite alternate ease-in-out;
animation: anim 0.5s infinite alternate ease-in-out;
}
.ball:nth-child(2) {
-webkit-transform: translate3d(26.2661px, 42.54518px, 0);
transform: translate3d(26.2661px, 42.54518px, 0);
-webkit-animation: anim 0.5s infinite alternate ease-in-out;
animation: anim 0.5s infinite alternate ease-in-out;
}
.ball:nth-child(3) {
-webkit-transform: translate3d(-22.40368px, 44.69983px, 0);
transform: translate3d(-22.40368px, 44.69983px, 0);
-webkit-animation: anim 0.5s infinite alternate ease-in-out;
animation: anim 0.5s infinite alternate ease-in-out;
}
.ball:nth-child(4) {
-webkit-transform: translate3d(-49.80439px, 4.41843px, 0);
transform: translate3d(-49.80439px, 4.41843px, 0);
-webkit-animation: anim 0.5s infinite alternate ease-in-out;
animation: anim 0.5s infinite alternate ease-in-out;
}
.ball:nth-child(5) {
-webkit-transform: translate3d(-29.923px, -40.05763px, 0);
transform: translate3d(-29.923px, -40.05763px, 0);
-webkit-animation: anim 0.5s infinite alternate ease-in-out;
animation: anim 0.5s infinite alternate ease-in-out;
}
.ball:nth-child(6) {
-webkit-transform: translate3d(18.36597px, -46.50474px, 0);
transform: translate3d(18.36597px, -46.50474px, 0);
-webkit-animation: anim 0.5s infinite alternate ease-in-out;
animation: anim 0.5s infinite alternate ease-in-out;
}
@-webkit-keyframes anim {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
background: #4f877c;
}
}
@keyframes anim {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
background: #4f877c;
}
}
</style>
</head>
<body>
<div class="spinner">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment