loading animation

index.pug

div
  h2 loading animation
  h1 with CSS only
#loading
  -for(n=0; n<3; n++)
    span

loading-animation.markdown

loading animation

CSS only '3 dots' loading animation.

A Pen by Polina Mazaeva on CodePen.

License.

style.css

/**
  Developed and tested on Chrome
  twitter@codeams,
  http://codeams.tk
*/

html{background-color:#0e0f10;}

#loading{
	  position:absolute;
	  top:50%; left:50%;
	  margin:54px 0 0 -63px;
}
#loading span{
  width:4px;
  height:4px;
  float:left;
  border-radius:50%;
  opacity:0.2;
  background-color:#15A2AB;
}
#loading span:not(:first-child){
  margin-left:4px;
}
#loading span:first-child{
  animation:fball 1350ms infinite linear;
}
#loading span:nth-child(2){
  animation:sball 1350ms infinite linear;
}
#loading span:last-child{
  animation:tball 1350ms infinite linear;
}
@keyframes fball{
	0%{opacity:0;transform:scale(0.5);}
	13%{opacity:0.9;transform:scale(1.03);}
	26%{opacity:1;transform:scale(0.95);}
	33%{transform:scale(1);}
34%{opacity:0.2;}
}
@keyframes sball{
32%{opacity:0.2;transform:scale(1);}
33%{opacity:0;transform:scale(0.5);}
	46%{opacity:0.9;transform:scale(1.03);}
	59%{opacity:1;transform:scale(0.95);}
	66%{transform:scale(1);}
67%{opacity:0.2;}
}
@keyframes tball{
67%{opacity:0.2;transform:scale(1);}
68%{opacity:0;transform:scale(0.5);}
	81%{opacity:0.9;transform:scale(1.03);}
	94%{opacity:1;transform:scale(0.95);}
	100%{transform:scale(1);}
}