<section class="container">
<div>
<div>
<span class="one h6"></span>
<span class="two h3"></span>
</div>
</div>
<div>
<div>
<span class="one h1"></span>
<span class="two h4"></span>
</div>
</div>
<div>
<div>
<span class="one h5"></span>
<span class="two h2"></span>
</div>
</div>
</section>
html,
body{
padding:0;
margin:0;
width:100%;height:100%;
display:flex;
justify-content:center;
align-items:center;
background:#ffe2b8
}
.container{
display:flex;
justify-content:center;
align-items:center;
}
div{
position:absolute;
width:90px;height:51px;
}
div:nth-of-type(2){transform:rotate(60deg)}
div:nth-of-type(3){transform:rotate(-60deg)}
div div{width:100%;height:100%;position:relative}
div div span{
position:absolute;
width:4px;height:0%;
background:#053146;z-index:999999;
}
.h1{left:0;
animation: load1 7.2s ease infinite;
}
.h2{right:0;
animation: load2 7.2s ease .6s infinite;
}
.h3{right:0;
animation: load3 7.2s ease 1.2s infinite;
}
.h4{right:0;
animation: load4 7.2s ease 1.8s infinite;
}
.h5{left:0;
animation: load5 7.2s ease 2.4s infinite;
}
.h6{left:0;
animation: load6 7.2s ease 3s infinite;
}
@keyframes load1 {
0%{bottom:0;height:0}
6.944444444%{bottom:0;height:100%}
50%{top:0;height:100%}
59.944444433%{top:0;height:0}
/* 91.6666667%{top:0;height:0%;} */
}
@keyframes load2 {
0%{top:0;height:0}
6.944444444%{top:0;height:100%}
50%{bottom:0;height:100%}
59.944444433%{bottom:0;height:0}
/* 91.6666667%{bottom:0;height:0%} */
}
@keyframes load3 {
0%{top:0;height:0}
6.944444444%{top:0;height:100%}
50%{bottom:0;height:100%}
59.94444443%{bottom:0;height:0}
/* 91.6666667%{bottom:0;height:0%;} */
}
@keyframes load4 {
0%{top:0;height:0}
6.944444444%{top:0;height:100%}
50%{bottom:0;height:100%}
59.94444443%{bottom:0;height:0}
/* 91.6666667%{bottom:0;height:0%;} */
}
@keyframes load5 {
0%{bottom:0;height:0}
6.944444444%{bottom:0;height:100%}
50%{top:0;height:100%}
59.94444443%{top:0;height:0}
/* 91.6666667%{top:0;height:0%;} */
}
@keyframes load6 {
0%{bottom:0;height:0}
6.944444444%{bottom:0;height:100%}
50%{top:0;height:100%}
59.94444443%{top:0;height:0}
/* 91.6666667%{top:0;height:0%;} */
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.