<div id="loader">
<div></div>
</div>
#loader {
border: 1px solid black;
width: 100px;
height: 100px;
margin: 40px auto;
overflow: hidden;
}
#loader > div {
background: black;
width: 10px;
height: 100px;
transform-origin: top center;
animation: load 2.5s infinite linear;
}
@keyframes load {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-90deg);
margin-left: -5px;
margin-top: 0;
transform-origin: top center;
}
50% {
margin-left: -5px;
margin-top: 95px;
transform-origin: top center;
transform: rotate(-90deg);
}
75% {
margin-left: 95px;
margin-top: 0;
transform-origin: bottom center;
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
transform-origin: bottom center;
margin-left: 0;
margin-top: 0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.