loading css animation

진행중입니다~ 하면서 로딩이미지 뜰 때 쓸만한 애니메이션을 css로 구현해 봄.

점 3개가 뱅글뱅글 돌아가는 액션.

 

아이콘.mp4

0.01MB

 

.loader {position:relative;display:flex;align-items:center;width:38px;height:24px;}
.dot{display:block;position:absolute;left:0;width:12px;height:12px;background:blue;border-radius:14px;
	aspect-ratio:1;animation:dot1 2.6s infinite, dot1-1 2.6s infinite;}
.dot2 {animation-delay: -0.86s;}
.dot3 {animation-delay: -1.73s;}

@keyframes dot1 {
  0%   {left:0}
 	33%  {left:50%;}
  66%  {left:100%}
  100% {left:0%}
}
@keyframes dot1-1 {
	0% {transform: scale(0.7); opacity:0.5}
	33% {transform: scale(1) ;opacity:1}
	66% {transform: scale(0.7); opacity:0.5}
	100% {transform: scale(0.7) ;opacity:0.5}
}

	<div class="loader">
		<div class="dot dot1"></div>
		<div class="dot dot2"></div>
		<div class="dot dot3"></div>
	</div>

css loading, loading animation css, dot loading animation, dot loading css, 로딩 애니메이션, 로딩 css, 로딩 애니메이션css