[CSS] 예쁘고 화려한 로딩 애니메이션 효과 디자인 모음

Doyeon0430 | 2023년 08월 10일

이번시간에는 css 애니메이션 효과를 사용하여 로딩 스피너를 제작하겠습니다.

로딩 스피너는 외부 데이터를 불러올 때 발생하는 처리시간을 시각적으로 나타내주는 도구입니다.

다양한 로딩 스피너로 웹사이트를 커스터마이징 할 수 있습니다.

그럼 직접 제작해 본 로딩 스피너 디자인을 소개하겠습니다.

로딩 스피너 디자인 - 모션 효과 1
로딩 스피너 디자인 - 모션 효과 2
로딩 스피너 디자인 - 모션 효과 3
로딩 스피너 디자인 - 모션 효과 4

1. 로딩 스피너 디자인 - 모션 효과 1

웹사이트에서 가장 많이 사용하는 로딩 스피너 디자인입니다.

border-bottom에 배경색을 넣어주고 border-radius로 원형을 만든 구조입니다.

@keyframes에 rotate를 추가시켜 한바퀴씩 무한 반복하도록 설정했습니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/abQrXKV"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

2. 로딩 스피너 디자인 - 모션 효과 2

3개의 공을 나열해서 순서대로 올라가는 물방울 로딩 스피너입니다.

display를 flex로 설정하고 animation-delay를 사용해서 시간대를 분리시켰습니다.

cubic-bezier를 통해 속도 곡선을 조절하여 자연스러운 애니메이션 효과를 넣었습니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/WNYBPBw"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

3. 로딩 스피너 디자인 - 모션 효과 3

생동감 있는 로딩 스피너를 만들었습니다.

@keyframes에 ease-in-out 타이밍 함수를 넣어 무한 반복시켰습니다.

transform으로 크기와 투명도를 조절했습니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/GRwazza"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

4. 로딩 스피너 디자인 - 모션 효과 4

원형이 아닌 정사각형으로 로딩 스피너를 만들었습니다.

rotate를 3초마다 설정하여 무한 반복 시켜줬습니다.

border-radius를 10%로 줘서 모서리를 다듬었습니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/KKrLJrM"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

글을 마치며 웹사이트에서 사용할 수 있는 로딩 스피너 디자인을 소개해봤습니다.

댓글이 없습니다.

간편 댓글 작성