<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);}}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.