Loading animated CSS

     <Divclass= "Loadeffect">          <span></span>          <span></span>          <span></span>          <span></span>          <span></span>          <span></span>          <span></span>          <span></span>      </Div>

. Loadeffect{width:100px;Height:100px;position:relative;margin:0 Auto;Margin-top:100px; }. Loadeffect span{Display:Inline-block;width:20px;Height:20px;Border-radius:50%;background:LightGreen;position:Absolute;-webkit-animation:load 1.04s ease infinite; }@-webkit-keyframes Load{0%{-webkit-transform:Scale (1.2);Opacity:1; }100%{-webkit-transform:Scale (. 3);Opacity:0.5; }}.loadeffect span:nth-child (1){ Left:0;Top:50%;Margin-top:-10px;-webkit-animation-delay:0.13s;}. Loadeffect span:nth-child (2){ Left:14px;Top:14px;-webkit-animation-delay:0.26s; }. Loadeffect span:nth-child (3){ Left:50%;Top:0;Margin-left:-10px;-webkit-animation-delay:0.39s; }. Loadeffect Span:nth-child (4){Top:14px; Right:14px;-webkit-animation-delay:0.52s; }. Loadeffect span:nth-child (5){ Right:0;Top:50%;Margin-top:-10px;-webkit-animation-delay:0.65s; }. Loadeffect Span:nth-child (6){ Right:14px;Bottom:14px;-webkit-animation-delay:0.78s; }. Loadeffect Span:nth-child (7){Bottom:0; Left:50%;Margin-left:-10px;-webkit-animation-delay:0.91s; }. Loadeffect Span:nth-child (8){Bottom:14px; Left:14px;-webkit-animation-delay:1.04s; }

HTML Section
<Divclass= "Loading">    <span></span>    <span></span>    <span></span>    <span></span>    <span></span></Div>

CSS Section
. Loading{width:150px;Height:15px;margin:0 Auto;Margin-top:100px; }. Loading span{Display:Inline-block;width:15px;Height:100%;Margin-right:5px;Border-radius:50%;background:LightGreen;-webkit-animation:load 1.04s ease infinite; }. Loading Span:last-child{Margin-right:0px; }@-webkit-keyframes Load{0%{Opacity:1;-webkit-transform:Scale (1.3); }100%{Opacity:0.2;-webkit-transform:Scale (. 3); }}. Loading Span:nth-child (1){-webkit-animation-delay:0.13s; }. Loading Span:nth-child (2){-webkit-animation-delay:0.26s; }. Loading Span:nth-child (3){-webkit-animation-delay:0.191; }. Loading Span:nth-child (4){-webkit-animation-delay:0.52s; }. Loading Span:nth-child (5){-webkit-animation-delay:0.65s; }

Loading animated CSS