<body>
<!-- my css version of the loader -->
<div class='content'>
  <h2>CSS Recreation of the "Dying Light" loading Icon<br>Pen created by <a href="http://sebastianinman.com" target="new">Sebastian Inman</a></h2>
  <div class='loader'>
    <div class='square'></div>
    <div class='lines'>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>
	</body>
body {
  background:#131313;
  border:0;
  height:100%;
  margin:0;
  padding:0;
  width:100%;
}
.content {
  background:#030303;
  left:0;
  position:absolute;
  height:100%;
  top:0;
  width:100%;
}
h2 {
  color:#fff;
  font-family:Arial, sans;
  font-size:13px;
  font-weight:400;
  left:100px;
  letter-spacing:1px;
  line-height:28px;
  position:absolute;
  text-transform:uppercase;
  top:100px;
  z-index:1;
}
video {
  left:50%;
  max-height:100%;
  max-width:100%;
  position:absolute;
  top:50%;
  -webkit-transform:translateX(-50%) translateY(-50%);
  -moz-transform:translateX(-50%) translateY(-50%);
  -ms-transform:translateX(-50%) translateY(-50%);
  -o-transform:translateX(-50%) translateY(-50%);
  transform:translateX(-50%) translateY(-50%);
}
.loader {
  height:22px;
  left:50%;
  position:absolute;
  top:50%;
  -webkit-transform:translateX(-50%) translateY(-50%) scale(2);
  -moz-transform:translateX(-50%) translateY(-50%);
  -ms-transform:translateX(-50%) translateY(-50%);
  -o-transform:translateX(-50%) translateY(-50%);
  transform:translateX(-50%) translateY(-50%) scale(2);
  width:22px;
}
.loader .square {
  background:#fff;
  height:10px;
  left:50%;
  position:absolute;
  top:50%;
  -webkit-transform:translateX(-50%) translateY(-50%);
  -moz-transform:translateX(-50%) translateY(-50%);
  -ms-transform:translateX(-50%) translateY(-50%);
  -o-transform:translateX(-50%) translateY(-50%);
  transform:translateX(-50%) translateY(-50%);
  width:10px;
}
.loader .lines {
  -webkit-animation:loader 0.9s infinite;
  animation:loader 0.9s infinite;
  height:100%;
  left:50%;
  position:absolute;
  top:50%;
  -webkit-transform:translateX(-50%) translateY(-50%);
  -moz-transform:translateX(-50%) translateY(-50%);
  -ms-transform:translateX(-50%) translateY(-50%);
  -o-transform:translateX(-50%) translateY(-50%);
  transform:translateX(-50%) translateY(-50%);
  width:100%;
}
@-webkit-keyframes loader {
  0% { height:100%; width:100%; transform:translateX(-50%) translateY(-50%) rotate(-90deg); }
  25% { height:180%; width:180%; transform:translateX(-50%) translateY(-50%) rotate(-90deg); }
  50% { height:180%; width:180%; transform:translateX(-50%) translateY(-50%) rotate(-180deg); }
  75% { height:100%; width:100%; transform:translateX(-50%) translateY(-50%) rotate(-180deg); }
  100% { height:100%; width:100%; transform:translateX(-50%) translateY(-50%) rotate(-180deg); }
}
@keyframes loader {
  0% { height:100%; width:100%; transform:translateX(-50%) translateY(-50%) rotate(-90deg); }
  25% { height:180%; width:180%; transform:translateX(-50%) translateY(-50%) rotate(-90deg); }
  50% { height:180%; width:180%; transform:translateX(-50%) translateY(-50%) rotate(-180deg); }
  75% { height:100%; width:100%; transform:translateX(-50%) translateY(-50%) rotate(-180deg); }
  100% { height:100%; width:100%; transform:translateX(-50%) translateY(-50%) rotate(-180deg); }
}
.lines span {
  height:10px;
  position:absolute;
  width:10px;
  z-index:1;
}
.lines span:before,
.lines span:after {
  background:rgba(255,255,255,0.5);
  content:'';
  position:absolute;
}
.lines span:before {
  left:0;
  height:1px;
  width:100%;
}
.lines span:after {
  height:100%;
  top:0;
  width:1px;
}
.lines span:nth-child(5),
.lines span:nth-child(2),
.lines span:nth-child(5):before,
.lines span:nth-child(2):before {
  top:0;
}
.lines span:nth-child(3),
.lines span:nth-child(4),
.lines span:nth-child(3):before,
.lines span:nth-child(4):before {
  bottom:0;
}
.lines span:nth-child(5),
.lines span:nth-child(3),
.lines span:nth-child(5):after,
.lines span:nth-child(3):after {
  left:0;
}
.lines span:nth-child(2),
.lines span:nth-child(4),
.lines span:nth-child(2):after,
.lines span:nth-child(4):after {
  right:0;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.