CSS
html,
body {
height: 100%;
}
body {
margin: 0;
background: linear-gradient(to left, #B24592 , #F15F79);
}
.container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.dot {
width: 10px;
height: 10px;
border: 2px solid white;
border-radius: 50%;
float: left;
margin: 0 5px;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation: fx 1000ms ease infinite 0ms;
animation: fx 1000ms ease infinite 0ms;
}
.dot:nth-child(2) {
-webkit-animation: fx 1000ms ease infinite 300ms;
animation: fx 1000ms ease infinite 300ms;
}
.dot:nth-child(3) {
-webkit-animation: fx 1000ms ease infinite 600ms;
animation: fx 1000ms ease infinite 600ms;
}
@-webkit-keyframes fx {
50% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fx {
50% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
opacity: 0;
}
}
