Code:
<!DOCTYPE HTML><HTMLLang= "en"><Head><MetaCharSet= "UTF-8"><title>Document</title><style>#box{position:relative;margin:100px;}#box span{Display:Block;width:9px;Height:5px;position:Absolute;Bottom:0;Background-color:#9b59b6;-webkit-animation:preloader 1.0s Infinite ease-in-out;}#box Span:nth-child (2){ Left:11px;-webkit-animation-delay:0.2s;}#box Span:nth-child (3){ Left:22px;-webkit-animation-delay:0.4s;}#box Span:nth-child (4){ Left:33px;-webkit-animation-delay:0.6s;}#box Span:nth-child (5){ Left:44px;-webkit-animation-delay:0.8s;}@-webkit-keyframes Preloader{0%{height:5px;Transform:Translatey (0px);Background-color:#9b59b6;}25%{Height:35px;Transform:Translatey (15px);Background-color:#3498db;}50%{Height:5px;Transform:Translatey (0px);Background-color:#9b59b6;}100%{Height:5px;Transform:Translatey (0px);Background-color:#9b59b6;}}</style></Head><Body> <DivID= "box"> <span></span> <span></span> <span></span> <span></span> <span></span> </Div></Body></HTML>
:
CSS3 Loading effect 1