<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
</head>

<body>
	<div id="wrap">
	<div class="container" id="progess">

		<div class="sphere" id="sphere1"></div>
		<div class="sphere" id="sphere2"></div>
		<div class="sphere" id="sphere3"></div>
		<div class="sphere" id="sphere4"></div>
		<div class="sphere" id="sphere5"></div>
		<div class="sphere" id="sphere6"></div>
		<div class="sphere" id="sphere7"></div>
		<div class="sphere" id="sphere8"></div>
		<div class="sphere" id="sphere9"></div>
		<div class="sphere" id="sphere10"></div>

		
		<div class="clear"></div>
		
	</div><!-- progress -->
		
		<div class="shadow" id="shadow1"></div>
		<div class="shadow" id="shadow2"></div>
		<div class="shadow" id="shadow3"></div>
		<div class="shadow" id="shadow4"></div>
		<div class="shadow" id="shadow5"></div>
		<div class="shadow" id="shadow6"></div>
		<div class="shadow" id="shadow7"></div>
		<div class="shadow" id="shadow8"></div>
		<div class="shadow" id="shadow9"></div>
		<div class="shadow" id="shadow10"></div>
		
	</div><!-- wrap -->
</body>

</html>
html {
  
  height: 100%;
  
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#2F2727), to(black));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-radial-gradient(circle, #2F2727, black);

  /* Firefox 3.6+ */
  background: -moz-radial-gradient(circle, #2F2727, black);

  /* IE 10 */
  background: -ms-radial-gradient(circle, #2F2727, black);
}
  
.container {
	margin: 80px auto;
	padding: 25px 10px 20px 50px;
	width: 100%;
	height: 40px;
	text-align: center;
	border: 4px ridge rgba(180,227,145,1);
	border-radius: 50px;
	box-shadow: 0px 0px 3px 2px black;
	
}

.sphere {
	height: 2em;
	width: 2em;
	border-radius: 50%;
	float: left;
	margin-right: 31px;
	z-index: 20 !Important;
	position: relative;
	-webkit-transform: scale(.3);
	z-index: -1;
	background: -webkit-radial-gradient(10% 10%, ellipse cover, rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%); /* Chrome10+, Safari5.1+ */
	background: -moz-radial-gradient(10% 10%, ellipse cover, rgba(180,227,145,1) 0%, rgba(97,196,25,1) 50%, rgba(180,227,145,1) 100%); /* FF3.6+ */
	background: -o-radial-gradient(10% 10%, ellipse cover, rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(10% 10%, ellipse cover, rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center, rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%); /* W3C */
}

.shadow {
	position: relative;
	top: -6.9em;
	width: 2em;
	left: 54px;
	height: 0.5em;
	box-shadow: 0px 0px 25px -.5px rgba(255, 255, 255, 1);
	border-radius: 50%;
	float: left;
	margin-right: 31px;
	-webkit-transform: scale(.3);
	opacity: 0;
}

.sphere:before { /*sourced from hop.ie/blog/balls*/
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 20%, circle, #ffffff, rgba(255, 255, 255, 0) 58%);
  z-index: 2;
} 


#wrap {
	margin: 0 auto;
	width: 640px;
}

.clear {
	clear: both;
}

#shadow1 {
	-webkit-animation: fade-1 2s 0s infinite;
}

#shadow2 {
	-webkit-animation: fade-2 2s .2s infinite;
}

#shadow3 {
	-webkit-animation: fade-3 2s .4s infinite;
}

#shadow4 {
	-webkit-animation: fade-4 2s .6s infinite;
}

#shadow5 {
	-webkit-animation: fade-5 2s .8s infinite;
}

#shadow6 {
	-webkit-animation: fade-6 2s 1s infinite;
}

#shadow7 {
	-webkit-animation: fade-7 2s 1.2s infinite;
}

#shadow8 {
	-webkit-animation: fade-8 2s 1.4s infinite;
}

#shadow9 {
	-webkit-animation: fade-9 2s 1.6s infinite;
}

#shadow10 {
	-webkit-animation: fade-10 2s 1.8s infinite;
}

#sphere1{
	-webkit-animation: scale-1 2s 0s infinite;
}

#sphere2 {
	-webkit-animation: scale-2 2s .2s infinite;
}

#sphere3 {
	-webkit-animation: scale-3 2s .4s infinite;
}

#sphere4 {
	-webkit-animation: scale-4 2s .6s infinite;
}

#sphere5 {
	-webkit-animation: scale-5 2s .8s infinite;
}

#sphere6 {
	-webkit-animation: scale-6 2s 1s infinite;
}

#sphere7 {
	-webkit-animation: scale-7 2s 1.2s infinite;
}

#sphere8 {
	-webkit-animation: scale-8 2s 1.4s infinite;
}

#sphere9 {
	-webkit-animation: scale-9 2s 1.6s infinite;
}

#sphere10 {
	-webkit-animation: scale-10 2s 1.8s infinite;
}

@-webkit-keyframes fade-1 {
	0% 		 { -webkit-transform: scale(.3);
				opacity: 0;
				}
	35%, 65% { -webkit-transform: scale(1);
				opacity: .3;
				}
	65%, 100%{ -webkit-transform: scale(.3);
				opacity: 0;
				}
}

@-webkit-keyframes fade-2 {
	0% 		 { -webkit-transform: scale(.3);
				opacity: 0;
				}
	35%, 65% { -webkit-transform: scale(1);
				opacity: .3;
				}
	65%, 100%{ -webkit-transform: scale(.3);
				opacity: 0;
				}
}

@-webkit-keyframes fade-3 {
	0% 		 { -webkit-transform: scale(.3);
				opacity: 0;
				}
	35%, 65% { -webkit-transform: scale(1);
				opacity: .3;
				}
	65%, 100%{ -webkit-transform: scale(.3);
				opacity: 0;
				}
}

@-webkit-keyframes fade-4 {
	0% 		 { -webkit-transform: scale(.3);
				opacity: 0;
				}
	35%, 65% { -webkit-transform: scale(1);
				opacity: .3;
				}
	65%, 100%{ -webkit-transform: scale(.3);
				opacity: 0;
				}
}

@-webkit-keyframes fade-5 {
	0% 		 { -webkit-transform: scale(.3);
				opacity: 0;
				}
	35%, 65% { -webkit-transform: scale(1);
				opacity: .3;
				}
	65%, 100%{ -webkit-transform: scale(.3);
				opacity: 0;
				}
}

@-webkit-keyframes fade-6 {
	0% 		 { -webkit-transform: scale(.3);
				opacity: 0;
				}
	35%, 65% { -webkit-transform: scale(1);
				opacity: .3;
				}
	65%, 100%{ -webkit-transform: scale(.3);
				opacity: 0;
				}
}

@-webkit-keyframes fade-7 {
	0% 		 { -webkit-transform: scale(.3);
				opacity: 0;
				}
	35%, 65% { -webkit-transform: scale(1);
				opacity: .3;
				}
	65%, 100%{ -webkit-transform: scale(.3);
				opacity: 0;
				}
}

@-webkit-keyframes fade-8 {
	0% 		 { -webkit-transform: scale(.3);
				opacity: 0;
				}
	35%, 65% { -webkit-transform: scale(1);
				opacity: .3;
				}
	65%, 100%{ -webkit-transform: scale(.3);
				opacity: 0;
				}
}

@-webkit-keyframes fade-9 {
	0% 		 { -webkit-transform: scale(.3);
				opacity: 0;
				}
	35%, 65% { -webkit-transform: scale(1);
				opacity: .3;
				}
	65%, 100%{ -webkit-transform: scale(.3);
				opacity: 0;
				}
}

@-webkit-keyframes fade-10 {
	0% 		 { -webkit-transform: scale(.3);
				opacity: 0;
				}
	35%, 65% { -webkit-transform: scale(1);
				opacity: .3;
				}
	65%, 100%{ -webkit-transform: scale(.3);
				opacity: 0;
				}
}

@-webkit-keyframes scale-1 {
	0% 		 { -webkit-transform: scale(.3);
				}
	35%, 65% { -webkit-transform: scale(1);
				}
	65%, 100%{ -webkit-transform: scale(.3);
				}
}

@-webkit-keyframes scale-2 {
	0% 		 { -webkit-transform: scale(.3);}
	35%, 65% { -webkit-transform: scale(1);}
	65%, 100%{ -webkit-transform: scale(.3);}
	}

@-webkit-keyframes scale-3 {
	0% 		 { -webkit-transform: scale(.3);}
	35%, 65% { -webkit-transform: scale(1);}
	65%, 100%{ -webkit-transform: scale(.3);}
	}

@-webkit-keyframes scale-4 {
	0%  	 { -webkit-transform: scale(.3);}
	35%, 65% { -webkit-transform: scale(1);}
	65%, 100%{ -webkit-transform: scale(.3);}}

@-webkit-keyframes scale-5 {
	0%  	 { -webkit-transform: scale(.3);}
	35%, 65% { -webkit-transform: scale(1);}
	65%, 100%{ -webkit-transform: scale(.3);}}

@-webkit-keyframes scale-6{
	0% 	 	 { -webkit-transform: scale(.3);}
	35%, 65% { -webkit-transform: scale(1);}
	65%, 100%{ -webkit-transform: scale(.3);}}

@-webkit-keyframes scale-7 {
	0% 		 { -webkit-transform: scale(.3);}
	35%, 65% { -webkit-transform: scale(1);}
	65%, 100%{ -webkit-transform: scale(.3);}}

@-webkit-keyframes scale-8 {
	0% 		 { -webkit-transform: scale(.3);}
	35%, 65% { -webkit-transform: scale(1);}
	65%, 100%{ -webkit-transform: scale(.3);}}

@-webkit-keyframes scale-9 {
	0% 		 { -webkit-transform: scale(.3);}
	35%, 65% { -webkit-transform: scale(1);}
	65%, 100%{ -webkit-transform: scale(.3);}}

@-webkit-keyframes scale-10 {
	0% 		 { -webkit-transform: scale(.3);}
	35%, 65% { -webkit-transform: scale(1);}
	65%, 100%{ -webkit-transform: scale(.3);}}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.