CSS
*, :before, :after {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
background-color: #3498db;
}
.loading {
background-color: rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset,
1px 1px 0 rgba(255, 255, 255, 0.2);
height: 16vw;
width: 16vw;
padding: 2vw;
position: relative;
-webkit-animation: rotate 10s linear infinite;
animation: rotate 10s linear infinite;
}
.loading:before {
background-color: #2c3e50;
content: '';
display: block;
height: 100%;
width: 100%;
}
.loading:after {
content: '';
display: block;
height: 1.9vw;
width: 1.9vw;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
top: 0;
left: 0;
margin: 0.05vw;
-webkit-animation: blocky 2.6s infinite;
animation: blocky 2.6s infinite;
}
@-webkit-keyframes blocky {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 1.9vw;
}
10% {
width: 3.5vw;
}
20% {
width: 1.9vw;
}
25% {
-webkit-transform: translate3d(14vw, 0, 0);
transform: translate3d(14vw, 0, 0);
height: 1.9vw;
}
35% {
height: 3.5vw;
}
45% {
height: 1.9vw;
}
50% {
-webkit-transform: translate3d(14vw, 14vw, 0);
transform: translate3d(14vw, 14vw, 0);
width: 1.9vw;
}
60% {
width: 3.5vw;
}
70% {
width: 1.9vw;
}
75% {
-webkit-transform: translate3d(0, 14vw, 0);
transform: translate3d(0, 14vw, 0);
height: 1.9vw;
}
85% {
height: 3.5vw;
}
95% {
height: 1.9vw;
}
}
@keyframes blocky {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 1.9vw;
}
10% {
width: 3.5vw;
}
20% {
width: 1.9vw;
}
25% {
-webkit-transform: translate3d(14vw, 0, 0);
transform: translate3d(14vw, 0, 0);
height: 1.9vw;
}
35% {
height: 3.5vw;
}
45% {
height: 1.9vw;
}
50% {
-webkit-transform: translate3d(14vw, 14vw, 0);
transform: translate3d(14vw, 14vw, 0);
width: 1.9vw;
}
60% {
width: 3.5vw;
}
70% {
width: 1.9vw;
}
75% {
-webkit-transform: translate3d(0, 14vw, 0);
transform: translate3d(0, 14vw, 0);
height: 1.9vw;
}
85% {
height: 3.5vw;
}
95% {
height: 1.9vw;
}
}
@-webkit-keyframes rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
