A CodePen by Joe Hana. Loading - Simple CSS loading animation.

index.html

<div id="load">
  <div>L</div>
  <div>O</div>
  <div>A</div>
  <div>D</div>
  <div>I</div>
  <div>N</div>
  <div>G</div>
</div>

script.js

/* Looks best in Chrome, use it as you please. */

style.css

body {
  background:#050505;
}

#load {
  position:absolute;
  width:600px;
  height:36px;
  left:50%;
  top:40%;
  margin-left:-300px;
  overflow:visible;
  user-select:none;
  cursor:default;
}

#load div {
  position:absolute;
  width:20px;
  height:36px;
  opacity:0;
  font-family:Helvetica, Arial, sans-serif;
  animation:move 2s linear infinite;

  transform:rotate(180deg);

  color: #E93131;
}

#load div:nth-child(2) {
  animation-delay:0.2s;
}
#load div:nth-child(3) {
  animation-delay:0.4s;
}
#load div:nth-child(4) {
  animation-delay:0.6s;
}
#load div:nth-child(5) {
  animation-delay:0.8s;
}
#load div:nth-child(6) {
  animation-delay:1s;
}
#load div:nth-child(7) {
  animation-delay:1.2s;
}

@keyframes move {
  0% {
    right:0;
    opacity:0;
  }
  35% {
		right: 41%; 
		transform:rotate(0deg);
		opacity:1;
	}
	65% {
		right:59%; 
		transform:rotate(0deg); 
		opacity:1;
	}
	100% {
		right:100%; 
		transform:rotate(-180deg);
		opacity:0;
	}
}