사각형 좌표 변경 로딩 애니메이션
예제보기
HTML
<div class="loading">
<span></span>
<span></span>
</div>
CSS
@import url('https://font.googleapis.com/css?family=Raleway&display=swap');
body {
font-family: 'Raleway', 'sans-serif';
line-height: 1.5em;
margin: 0%;
font-weight: 300;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
a {
text-decoration: none;
}
.loading {
width: 30px;
height: 30px;
position: relative;
}
.loading span {
position: absolute;
width: 10px;
height: 10px;
background-color: #fff;
top: 0;
left: 0;
animation: loading 1.5s infinite;
background-color: crimson;
}
.loading span:nth-child(2) {
animation-delay: 0.8s;
}
@keyframes loading {
0% {
top: 0;
left: 0;
}
25% {
top: 0;
left: calc(100% - 10px);
background-color: dodgerblue;
}
50% {
top: calc(100% - 10px);
left: calc(100% - 10px);
background-color: orange;
}
75% {
top: calc(100% - 10px);
left: 0;
background-color: yellowgreen;
}
100% {
top: 0;
left: 0;
}
}