.running_container{
position:absolute;
top:50%;
left:50%;
margin:auto;
}
ul.running{
list-style:none;
width:125px;
-webkit-margin-before:1em;
-webkit-margin-after:1em;
-webkit-margin-start:0px;
-webkit-margin-end:0px;
-webkit-padding-start:0px;
-moz-margin-before:1em;
-moz-margin-after:1em;
-moz-margin-start:0px;
-moz-margin-end:0px;
-moz-padding-start:0px;
-ms-margin-before:1em;
-ms-margin-after:1em;
-ms-margin-start:0px;
-ms-margin-end:0px;
-ms-padding-start:0px;
-o-margin-before:1em;
-o-margin-after:1em;
-o-margin-start:0px;
-o-margin-end:0px;
-o-padding-start:0px;
margin-before:1em;
margin-after:1em;
margin-start:0px;
margin-end:0px;
padding-start:0px;
}
ul.running li:first-child{
margin-left:0;
}
ul.running li{
float:left;
position:relative;
width:15px;
height:15px;
border:1px solid #fff;
margin-left:10px;
border-radius:50px;
border-left:1px solid #FFFAF0;
border-top:1px solid #FFFAF0;
border-right:1px solid #FFFAF0;
border-bottom:1px solid #FFFAF0;
background-color:1px solid #FFFAF0;
}
.running .running_ball{
background-color:#2187e7;
background-image:-moz-linear-gradient(90deg,#2187e7 25%,#a0eaff);
background-image:-webkit-linear-gradient(90deg,#2187e7 25%,#a0eaff);
background-image:-ms-linear-gradient(90deg,#2187e7 25%,#a0eaff);
background-image:-o-linear-gradient(90deg,#2187e7 25%,#a0eaff);
background-image:linear-gradient(90deg,#2187e7 25%,#a0eaff);
width:15px;
height:15px;
border-radius:50px;
}
.running .running_pulse{
width:15px;
height:15px;
border-radius:30px;
border:1px solid #00c6ff;
box-shadow:0 0 5px #00c6ff;
position:absolute;
top:-1px;
left:-1px;
-webkit-transform:scale(0);
-webkit-animation:pulse 1s ease-out infinite;
-moz-transform:scale(0);
-moz-animation:pulse 1s ease-out infinite;
-ms-transform:scale(0);
-ms-animation:pulse 1s ease-out infinite;
-o-transform:scale(0);
-o-animation:pulse 1s ease-out infinite;
transform:scale(0);
animation:pulse 1s ease-out infinite;
-moz-animation-duration:3.5s;
-webkit-animation-duration:3.5s;
-ms-animation-duration:3.5s;
-o-animation-duration:3.5s;
animation-duration:3.5s;
}
#running1{
-webkit-transform:scale(0);
-webkit-animation:loading1 1s linear forwards infinite;
-moz-transform:scale(0);
-moz-animation:loading1 1s linear forwards infinite;
-ms-transform:scale(0);
-ms-animation:loading1 1s linear forwards infinite;
-o-transform:scale(0);
-o-animation:loading1 1s linear forwards infinite;
transform:scale(0);
animation:loading1 1s linear forwards infinite;
-moz-animation-duration:3.5s;
-webkit-animation-duration:3.5s;
-ms-animation-duration:3.5s;
-o-animation-duration:3.5s;
animation-duration:3.5s;
}
#running2{
-moz-animation-delay:0.5s;
-webkit-animation-delay:0.5s;
-ms-animation-delay:0.5s;
-o-animation-delay:0.5s;
animation-delay:0.5s;
}
#running3{
-webkit-transform:scale(0);
-webkit-animation:loading2 1s linear forwards infinite;
-moz-transform:scale(0);
-moz-animation:loading2 1s linear forwards infinite;
-ms-transform:scale(0);
-ms-animation:loading2 1s linear forwards infinite;
-o-transform:scale(0);
-o-animation:loading2 1s linear forwards infinite;
transform:scale(0);
animation:loading2 1s linear forwards infinite;
-moz-animation-duration:3.5s;
-webkit-animation-duration:3.5s;
-ms-animation-duration:3.5s;
-o-animation-duration:3.5s;
animation-duration:3.5s;
}
#running4{
-moz-animation-delay:1s;
-webkit-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}
#running5{
-webkit-transform:scale(0);
-webkit-animation:loading3 1s linear forwards infinite;
-moz-transform:scale(0);
-moz-animation:loading3 1s linear forwards infinite;
-ms-transform:scale(0);
-ms-animation:loading3 1s linear forwards infinite;
-o-transform:scale(0);
-o-animation:loading3 1s linear forwards infinite;
transform:scale(0);
animation:loading3 1s linear forwards infinite;
-moz-animation-duration:3.5s;
-webkit-animation-duration:3.5s;
-ms-animation-duration:3.5s;
-o-animation-duration:3.5s;
animation-duration:3.5s;
}
#running6{
-moz-animation-delay:1.5s;
-webkit-animation-delay:1.5s;
-ms-animation-delay:1.5s;
-o-animation-delay:1.5s;
animation-delay:1.5s;
}
#running7{
-webkit-transform:scale(0);
-webkit-animation:loading4 1s linear forwards infinite;
-moz-transform:scale(0);
-moz-animation:loading4 1s linear forwards infinite;
-ms-transform:scale(0);
-ms-animation:loading4 1s linear forwards infinite;
-o-transform:scale(0);
-o-animation:loading4 1s linear forwards infinite;
transform:scale(0);
animation:loading4 1s linear forwards infinite;
-moz-animation-duration:3.5s;
-webkit-animation-duration:3.5s;
-ms-animation-duration:3.5s;
-o-animation-duration:3.5s;
animation-duration:3.5s;
}
#running8{
-moz-animation-delay:2s;
-webkit-animation-delay:2s;
-ms-animation-delay:2s;
-o-animation-delay:2s;
animation-delay:2s;
}
#running9{
-webkit-transform:scale(0);
-webkit-animation:loading5 1s linear forwards infinite;
-moz-transform:scale(0);
-moz-animation:loading5 1s linear forwards infinite;
-ms-transform:scale(0);
-ms-animation:loading5 1s linear forwards infinite;
-o-transform:scale(0);
-o-animation:loading5 1s linear forwards infinite;
transform:scale(0);
animation:loading5 1s linear forwards infinite;
-moz-animation-duration:3.5s;
-webkit-animation-duration:3.5s;
-ms-animation-duration:3.5s;
-o-animation-duration:3.5s;
animation-duration:3.5s;
}
#running10{
-moz-animation-delay:2.5s;
-webkit-animation-delay:2.5s;
-ms-animation-delay:2.5s;;
-o-animation-delay:2.5s;
animation-delay:2.5s;
}

@-moz-keyframes loading1{
    0%{-moz-transform:scale(0,0);}
    14%{-moz-transform:scale(0,0);}
    43%{-moz-transform:scale(1,1);}
    100%{-moz-transform:scale(1,1);}
}
@-moz-keyframes loading2{
    0%{-moz-transform:scale(0,0);}
    29%{-moz-transform:scale(0,0);}
    58%{-moz-transform:scale(1,1);}
    100%{-moz-transform:scale(1,1);}
}
@-moz-keyframes loading3{
    0%{-moz-transform:scale(0,0);}
    43%{-moz-transform:scale(0,0);}
    72%{-moz-transform:scale(1,1);}
    100%{-moz-transform:scale(1,1);}
}
@-moz-keyframes loading4{
    0%{-moz-transform:scale(0,0);}
    58%{-moz-transform:scale(0,0);}
    86%{-moz-transform:scale(1,1);}
    100%{-moz-transform:scale(1,1);}
}
@-moz-keyframes loading5{
    0%{-moz-transform:scale(0,0);}
    72%{-moz-transform:scale(0,0);}
    100%{-moz-transform:scale(1,1);}
}
@-webkit-keyframes loading1{
    0%{-webkit-transform:scale(0,0);}
    14%{-webkit-transform:scale(0,0);}
    43%{-webkit-transform:scale(1,1);}
    100%{-webkit-transform:scale(1,1);}
}
@-webkit-keyframes loading2{
    0%{-webkit-transform:scale(0,0);}
    29%{-webkit-transform:scale(0,0);}
    58%{-webkit-transform:scale(1,1);}
    100%{-webkit-transform:scale(1,1);}
}
@-webkit-keyframes loading3{
    0%{-webkit-transform:scale(0,0);}
    43%{-webkit-transform:scale(0,0);}
    72%{-webkit-transform:scale(1,1);}
    100%{-webkit-transform:scale(1,1);}
}
@-webkit-keyframes loading4{
    0%{-webkit-transform:scale(0,0);}
    58%{-webkit-transform:scale(0,0);}
    86%{-webkit-transform:scale(1,1);}
    100%{-webkit-transform:scale(1,1);}
}
@-webkit-keyframes loading5{
    0%{-webkit-transform:scale(0,0);}
    72%{-webkit-transform:scale(0,0);}
    100%{-webkit-transform:scale(1,1);}
}
@-ms-keyframes loading1{
    0%{-ms-transform:scale(0,0);}
    14%{-ms-transform:scale(0,0);}
    43%{-ms-transform:scale(1,1);}
    100%{-ms-transform:scale(1,1);}
}
@-ms-keyframes loading2{
    0%{-ms-transform:scale(0,0);}
    29%{-ms-transform:scale(0,0);}
    58%{-ms-transform:scale(1,1);}
    100%{-ms-transform:scale(1,1);}
}
@-ms-keyframes loading3{
    0%{-ms-transform:scale(0,0);}
    43%{-ms-transform:scale(0,0);}
    72%{-ms-transform:scale(1,1);}
    100%{-ms-transform:scale(1,1);}
}
@-ms-keyframes loading4{
    0%{-ms-transform:scale(0,0);}
    58%{-ms-transform:scale(0,0);}
    86%{-ms-transform:scale(1,1);}
    100%{-ms-transform:scale(1,1);}
}
@-ms-keyframes loading5{
    0%{-ms-transform:scale(0,0);}
    72%{-ms-transform:scale(0,0);}
    100%{-ms-transform:scale(1,1);}
}
@-0-keyframes loading1{
    0%{-0-transform:scale(0,0);}
    14%{-0-transform:scale(0,0);}
    43%{-0-transform:scale(1,1);}
    100%{-0-transform:scale(1,1);}
}
@-0-keyframes loading2{
    0%{-0-transform:scale(0,0);}
    29%{-0-transform:scale(0,0);}
    58%{-0-transform:scale(1,1);}
    100%{-0-transform:scale(1,1);}
}
@-0-keyframes loading3{
    0%{-0-transform:scale(0,0);}
    43%{-0-transform:scale(0,0);}
    72%{-0-transform:scale(1,1);}
    100%{-0-transform:scale(1,1);}
}
@-0-keyframes loading4{
    0%{-0-transform:scale(0,0);}
    58%{-0-transform:scale(0,0);}
    86%{-0-transform:scale(1,1);}
    100%{-0-transform:scale(1,1);}
}
@-0-keyframes loading5{
    0%{-0-transform:scale(0,0);}
    72%{-0-transform:scale(0,0);}
    100%{-0-transform:scale(1,1);}
}
@keyframes loading1{
    0%{transform:scale(0,0);}
    14%{transform:scale(0,0);}
    43%{transform:scale(1,1);}
    100%{transform:scale(1,1);}
}
@keyframes loading2{
    0%{transform:scale(0,0);}
    29%{transform:scale(0,0);}
    58%{transform:scale(1,1);}
    100%{transform:scale(1,1);}
}
@keyframes loading3{
    0%{transform:scale(0,0);}
    43%{transform:scale(0,0);}
    72%{transform:scale(1,1);}
    100%{transform:scale(1,1);}
}
@keyframes loading4{
    0%{transform:scale(0,0);}
    58%{transform:scale(0,0);}
    86%{transform:scale(1,1);}
    100%{transform:scale(1,1);}
}
@keyframes loading5{
    0%{transform:scale(0,0);}
    72%{transform:scale(0,0);}
    100%{transform:scale(1,1);}
}
@-moz-keyframes pulse{
    0%   {-moz-transform: scale(0);opacity: 0;}
    10%  {-moz-transform: scale(1);opacity: 0.5;}
    50%  {-moz-transform: scale(1.75);opacity: 0;}
    100% {-moz-transform: scale(0);opacity: 0;}
}
@-webkit-keyframes pulse{
    0%   {-webkit-transform: scale(0);opacity: 0;}
    10%  {-webkit-transform: scale(1);opacity: 0.5;}
    50%  {-webkit-transform: scale(1.75);opacity: 0;}
    100% {-webkit-transform: scale(0);opacity: 0;}
}
@-ms-keyframes pulse{
    0%   {-ms-transform: scale(0);opacity: 0;}
    10%  {-ms-transform: scale(1);opacity: 0.5;}
    50%  {-ms-transform: scale(1.75);opacity: 0;}
    100% {-ms-transform: scale(0);opacity: 0;}
}
@-0-keyframes pulse{
    0%   {-0-transform: scale(0);opacity: 0;}
    10%  {-0-transform: scale(1);opacity: 0.5;}
    50%  {-0-transform: scale(1.75);opacity: 0;}
    100% {-0-transform: scale(0);opacity: 0;}
}
@keyframes pulse{
    0%   {transform: scale(0);opacity: 0;}
    10%  {transform: scale(1);opacity: 0.5;}
    50%  {transform: scale(1.75);opacity: 0;}
    100% {transform: scale(0);opacity: 0;}
}