<div class="holder">  
  <div class="bar left"></div>
  <div class="bar top"></div>
  <div class="bar right"></div>
  <div class="bar bottom"></div>
</div>

body{
  background: #222;
  margin: 0;
}
.holder{
  /*approx center*/
  position: absolute;
  top: 45%;
  left: 45%;
}
  
.bar{
  background: #d0f0dd;
  box-shadow: 0px 0px 0 #40ff22,
    0px 0px 4px #30ff1f,
    0px 0px 8px #20ff1b,
    0px 0px 16px #10ff18;
  border-radius: 4px;
  position: absolute;
}
.left{
  width: 4px;
  -webkit-animation: left 2s linear infinite;
}
@-webkit-keyframes left{
  0%  {height: 0; top: 96px; left: 0;}
  20% {height: 100px; top: 0; left: 0;}
  40% {height: 0; top: 0; left: 0;}
}
.top{
  height: 4px;
  -webkit-animation: top 2s linear infinite;
}
@-webkit-keyframes top{
  0%  {width: 0; top: 0; left: 0;}
  20% {width: 0; top: 0; left: 0;}
  40% {width: 100px; top: 0; left: 0;}
  60% {width: 0; top:0; left: 100px;}
}
.right{
  width: 4px;
  -webkit-animation: right 2s linear infinite;
}
@-webkit-keyframes right{
  0%  {height: 0; top: 0; left: 96px;}
  40% {height: 0; top: 0; left: 96px;}
  60% {height: 100px; top: 0; left: 96px;}
  80% {height: 0; top: 100px;left: 96px;}
}
.bottom{
  height: 4px;
  -webkit-animation: bottom 2s linear infinite;
}
@-webkit-keyframes bottom{
  0%  {width: 0; top: 96px; left: 96px;}
  60% {width: 0; top: 96px; left: 96px;}
  80% {width: 100px; top:96px; left: 0px;}
  100% {width: 0px; top:96px; left: 0px;}
}