Firefly loader
HTML
<div class="blue"></div>
<div class="yellow"></div>
LESS
body {
background:#111;
}
.blue {
position: absolute;
top: 50%;
left: 70%;
height: 16px;
width: 16px;
border-radius: 100%;
&:after {
content: "";
position: absolute;
top: 50%;
left: 80%;
transform: translate(-50%, -50%);
height: 20px;
width: 20px;
border-radius: 100%;
background: cyan;
border-radius: 100%;
box-shadow: 0 0 14px 4px cyan;
animation: beat 4s infinite;
}
}
.yellow {
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%, -50%);
height: 16px;
width: 16px;
border-radius: 100%;
&:after {
content: "";
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
height: 20px;
width: 20px;
background: yellow;
border-radius: 100%;
box-shadow: 0 0 14px 4px yellow;
animation: beat 4s infinite;
}
}
.sphere {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 4px;
width: 4px;
border-radius: 100%;
box-shadow: 0 0 10px 4px #00BCD4;
// animation: beat 1s infinite;
animation: move 6s infinite;
}
@keyframes beat {
0% {
transform: translate(-50%, -50%) scale(1) ;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
}
100% {
transform: translate(-50%, -50%) scale(1) ;
}
}
@keyframes move {
50% {
top: 50%;
left: 70%;
opacity: 1;
box-shadow: 0 0 14px 4px cyan;
background:cyan;
}
0% {
top: 50%;
left: 40%;
opacity: 1;
transform: scale(1) ;
box-shadow: 0 0 14px 4px yellow;
background:yellow;
}
25%
{
top:50%;
transform: scale(1.6) ;
}
75%
{
top:50%;
transform: scale(1.6) ;
}
100%
{
top:50%;
left:40%;
box-shadow: 0 0 14px 4px yellow;
background:yellow;
transform: scale(1) ;
}
}
JAVASCRIPT
/* inspired from sphere loader */
function spawnSphere() {
var $sphere = '<div class="sphere"></div>';
$("body").append( $sphere ).find(".sphere").animate({
top: '0px',
opacity: 0,
}, 8000, function(){
$("body").find(".sphere:first").remove();
});
}
setInterval("spawnSphere()", 900);
