Skip to content

Instantly share code, notes, and snippets.

@chrissimpkins
Last active August 29, 2015 14:00
Show Gist options
  • Save chrissimpkins/11406950 to your computer and use it in GitHub Desktop.
Save chrissimpkins/11406950 to your computer and use it in GitHub Desktop.
A Pen by Chris Simpkins.
<div class="wrapper">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
@import "compass";
body {background:#FFF;}
.wrapper {
position:relative;
width :90px;
height:50px;
left:calc(50% - 50px);
top :80px;
}
.dot {
position:absolute;
width :10px;
height:10px;
border-radius:50%;
}
@for $i from 1 through 16 {
.dot:nth-child(#{$i}) {
animation:load 1.6s linear infinite;
animation-delay:($i*0.1) + s;
-webkit-animation: load 1.6s linear infinite;
-webkit-animation-delay: ($i*0.1) + s;
}
@keyframes load {
5% {background:#333;}
}
@-webkit-keyframes load {
5% {background:#333;}
}
}
.dot:nth-child(1) {top:20px; left: 0;}
.dot:nth-child(2) {top:10px; left:10px;}
.dot:nth-child(3) {top: 0; left:20px;}
.dot:nth-child(4) {top:10px; left:30px;}
.dot:nth-child(5) {top:20px; left:40px;}
.dot:nth-child(6) {top:30px; left:50px;}
.dot:nth-child(7) {top:40px; left:60px;}
.dot:nth-child(8) {top:30px; left:70px;}
.dot:nth-child(9) {top:20px; left:80px;}
.dot:nth-child(10) {top:10px; left:70px;}
.dot:nth-child(11) {top: 0; left:60px;}
.dot:nth-child(12) {top:10px; left:50px;}
.dot:nth-child(13) {top:20px; left:40px;}
.dot:nth-child(14) {top:30px; left:30px;}
.dot:nth-child(15) {top:40px; left:20px;}
.dot:nth-child(16) {top:30px; left:10px;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment