CSS: a simple loader

Body{margin:0;padding:0;background:#3498db;}. Cs-loader{position:Absolute;Top:0; Left:0;Height:100%;width:100%;}. Cs-loader-inner{Transform:Translatey ( -50%);Top:50%;position:Absolute;width:Calc (100%-200px);Color:#FFF;padding:0 100px;text-align:Center;}. Cs-loader-inner Label{font-size:20px;Opacity:0;Display:Inline-block;}@keyframes lol{0% {opacity:0;Transform:TranslateX ( -300px); }33%{Opacity:1;Transform:TranslateX (0px); }66%{Opacity:1;Transform:TranslateX (0px); }100%{Opacity:0;Transform:TranslateX (300px); }}@-webkit-keyframes lol{0% {opacity:0;-webkit-transform:TranslateX ( -300px); }33%{Opacity:1;-webkit-transform:TranslateX (0px); }66%{Opacity:1;-webkit-transform:TranslateX (0px); }100%{Opacity:0;-webkit-transform:TranslateX (300px); }}.cs-loader-inner Label:nth-child (6){-webkit-animation:lol 3s infinite ease-in-out;Animation:lol 3s infinite ease-in-out;}. Cs-loader-inner label:nth-child (5){-webkit-animation:lol 3s 100ms infinite ease-in-out;Animation:lol 3s 100ms infinite ease-in-out;}. Cs-loader-inner Label:nth-child (4){-webkit-animation:lol 3s 200ms infinite ease-in-out;Animation:lol 3s 200ms infinite ease-in-out;}. Cs-loader-inner label:nth-child (3){-webkit-animation:lol 3s 300ms infinite ease-in-out;Animation:lol 3s 300ms infinite ease-in-out;}. Cs-loader-inner label:nth-child (2){-webkit-animation:lol 3s 400ms infinite ease-in-out;Animation:lol 3s 400ms infinite ease-in-out;}. Cs-loader-inner label:nth-child (1){-webkit-animation:lol 3s 500ms infinite ease-in-out;Animation:lol 3s 500ms infinite ease-in-out;}

<Divclass= "Cs-loader">  <Divclass= "Cs-loader-inner">    <label></label>    <label></label>    <label></label>    <label></label>    <label></label>    <label></label>  </Div></Div>

CSS: a simple loader