<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;}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.