원형 크기 변경 로딩 애니메이션
예제보기
HTML
<div class="loading">
<span></span>
<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 {}
.loading span {
display: inline-block;
width: 15px;
height: 15px;
background-color: gray;
border-radius: 50%;
animation: loading 1s linear infinite;
}
.loading span:nth-child(1) {
animation-delay: 0s;
background-color: rgb(252, 71, 107);
}
.loading span:nth-child(2) {
animation-delay: 0.2s;
background-color: rgb(77, 164, 250);
}
.loading span:nth-child(3) {
animation-delay: 0.4s;
background-color: rgb(156, 226, 25);
}
@keyframes loading {
0%,100% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}