body {
background-color: #bfbfbf;
margin: 0;
}

p {
position: absolute;
left: 50%;
top: 50%;
width: 110px;
margin: 40px 0 0 -55px;
color: rgba(0,0,0,0.15);
font-family: "Arial", "Segoe UI", sans-serif;
font-size: 2.2em;
text-align: center;
}

p:nth-of-type(1) {
font-size: 3.6em;
margin-top: -10px;
}

p:nth-of-type(2) {
font-size: 3.6em;
margin-top: 0px;
}

.circle {
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 10px; 
border-radius: 50%;
border: 1px solid #e6e6e6;
box-shadow: 0px 1px 3px #9f9f9f;
-moz-animation-name: jump;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-webkit-animation-name: jump;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
}

.circle:nth-of-type(1) {
margin: -20px 0 0 -65px;
-moz-animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}

.circle:nth-of-type(2) {
margin: -20px 0 0 -45px;
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}

.circle:nth-of-type(3) {
margin: -20px 0 0 -25px;
-moz-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}

.circle:nth-of-type(4) {
margin: -20px 0 0 -5px;
-moz-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}

.circle:nth-of-type(5) {
margin: -20px 0 0 15px;
-moz-animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}

.circle:nth-of-type(6) {
margin: -20px 0 0 35px;
-moz-animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}

.circle:nth-of-type(7) {
margin: -20px 0 0 55px;
-moz-animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}

@-webkit-keyframes jump {
0% {border: 1px solid #bfbfbf;}
50% {-webkit-transform:translateY(-30px);}
75% {border: 1px solid #fff; box-shadow: 0px 6px 3px #9f9f9f;}
100% {border: 1px solid #bfbfbf;}
}

@-moz-keyframes jump {
0% {border: 1px solid #bfbfbf;}
50% {-moz-transform:translateY(-30px);}
75% {border: 1px solid #fff; box-shadow: 0px 6px 3px #9f9f9f;}
100% {border: 1px solid #bfbfbf;}
}