<div class="flickr-loader">
<b class="dot-pink"></b>
<b class="dot-blue"></b>
</div>
body{
padding: 30px;
}
.flickr-loader {
position: relative;
width: 110px;
height: 50px;
background:#333;
}
.dot-pink,
.dot-blue {
position: absolute;
top: 0;
width: 50px;
height: 50px;
border-radius: 100%;
animation: 1s ease-in-out infinite;
}
.dot-pink {
background: #ff2e92;
left: 0;
animation-name: pink;
}
.dot-blue {
background: #007bdc;
right: 0;
animation-name: blue;
}
@keyframes pink {
0% {
z-index: 1;
}
50% {
left:50px;
}
}
@keyframes blue {
50% {
right:50px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.