anabenne,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#point1,#point2,#point3 {
width: 10px;
height: 10px;
position: absolute;
border-radius: 10px;
}
#point1 {
background-color: #222;
top: 1px;
left: 0px;
}
#point2 {
background-color: #111;
top: 1px;
left: 40px;
}
#point3 {
background-color: #555;
top: 1px;
left: 80px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var item = $(".point"), indx = -1, len = item.length;
(function go()
{
indx = ++indx % len;
!indx && item.hide();
item.eq(indx).delay(1000).fadeToggle(1200, go)
}())
});
</script>
</head>
<body>
<div id="point1" class="point"></div>
<div id="point2" class="point"></div>
<div id="point3" class="point"></div>
</body>
</html>