A Pen by patch werk.

index.html

My initials forming out of sticks for a loading screen

<div id="loading_container">
  <div class="loading a1"></div>
  <div class="loading a2"></div>
  <div class="loading d1"></div>
  <div class="loading d2"></div>
  <div class="loading d3"></div>
  <div class="loading p1"></div>
  <div class="loading p2"></div>
  <div class="loading p3"></div>
</div>

Initials-Loading-Screen.markdown

Initials Loading Screen

My initials forming out of sticks for a loading screen

A Pen by patch werk on CodePen.

License.

style.css

body {
  background: #4b4b4b;
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 40px;
  color: white;
  font-weight: 100;
  
}
#loading_container{
  width: 500px;
  height: 50px;
  position: absolute;
  margin: auto;
  display: block;
  top: 50%;
  left: 50%;
  
}
.loading{
  display: inline-block;
  background: rgba(255,255,255,0.8);
  width:50px;
  height:2px;
}
.loading.a1{
  -webkit-transform: translateX(0px);
  -webkit-animation: loadinga1 3s infinite;
}
.loading.a2{
  -webkit-transform: translateX(-0px);
  -webkit-animation: loadinga2 3s infinite;
}
.loading.d1{
  -webkit-transform: translateX(-0px);
  -webkit-animation: loadingd1 3s infinite;
}
.loading.d2{
  
  -webkit-transform: translateX(-0px);
  -webkit-animation: loadingd2 3s infinite;
}
.loading.d3{
  -webkit-transform: translateX(-0px);
  -webkit-animation: loadingd3 3s infinite;
}
.loading.p1{
  -webkit-transform: translateX(-0px);
  -webkit-animation: loadingp1 3s infinite;
}
.loading.p2{
  width: 30px;
  -webkit-transform: translateX(-0px);
  -webkit-animation: loadingp2 3s infinite;
}
.loading.p3{
  width: 30px;
  -webkit-transform: translateX(-0px);
  -webkit-animation: loadingp3 3s infinite;
}

@-webkit-keyframes loadinga1 {
  0%,100%{ -webkit-transform:translateY(0) rotate(0); }
  40%,60%{ -webkit-transform:translateY(-50px) rotate(115deg); }
}
@-webkit-keyframes loadinga2 {
  0%,100%{ -webkit-transform:translateY(0) rotate(0); }
  40%,60%{ -webkit-transform:translateY(-50px) translateX(-41px) rotate(245deg); }
}
@-webkit-keyframes loadingd1 {
  0%,100%{ -webkit-transform:translateY(0) rotate(0); }
  40%,60%{ -webkit-transform:translateY(-50px) translateX(-70px) rotate(90deg); }
}
@-webkit-keyframes loadingd2 {
  0%,100%{ -webkit-transform:translateY(0) rotate(0); }
  40%,60%{ -webkit-transform:translateY(-62px) translateX(-110px) rotate(30deg); }
}
@-webkit-keyframes loadingd3 {
  0%,100%{ -webkit-transform:translateY(0) rotate(0); }
  40%,60%{ -webkit-transform:translateY(-38px) translateX(-171px) rotate(-30deg); }
  100%{ -webkit-transform:translateY(0) rotate(0); }
}
@-webkit-keyframes loadingp1 {
  0%,100%{ -webkit-transform:translateY(0) rotate(0); }
  40%,60%{ -webkit-transform:translateY(-50px) translateX(-190px) rotate(90deg); }
}
@-webkit-keyframes loadingp2 {
  0%,100%{ -webkit-transform:translateY(0) rotate(0); }
  40%,60%{ -webkit-transform:translateY(-67px) translateX(-229px) rotate(30deg); }
}
@-webkit-keyframes loadingp3 {
  0%,100%{ -webkit-transform:translateY(0) rotate(0); }
  40%,60%{ -webkit-transform:translateY(-52px) translateX(-270px) rotate(-30deg); }
}