[CSS] 로딩 애니메이션 효과

 

 

 

로딩 애니메이션 효과를 CSS로 간단하게 표현하는 방법입니다.

 

로딩 중

 

 

 

1. CSS

 

.loading_box {position: relative; width: 60px; height: 20px; line-height: 20px;}
.loading_box span {display: inline-block; width: 10px; height: 10px; margin-left: 25px; background: #d1d3d7; border-radius: 50%; font-size: 0; animation: loading_ani 1s infinite linear alternate; animation-delay: .5s;}
.loading_box span::before, .loading_box span::after { content: ''; display: inline-block; position: absolute; top: 6px; width: 10px; height: 10px; background: #0026dd; border-radius: 50%; animation: loading_ani 1s infinite alternate; }
.loading_box span::before { left: 0; animation-delay: 0s; }
.loading_box span::after { right: 0; animation-delay: 1s; }
@keyframes loading_ani { 0% { background: #0026dd; } 50%, 100% { background: #d1d3d7; } }

 

 

 

2. HTML

 

<div class="loading_box">
	<span>로딩 중</span>
</div>