CSS -로더: 동적 로딩 애니메이션 생성에 대한 초보자 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘은 CSS 로더의 fascineting 세상으로 함께 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 안내해 드리는 것을 기쁘게 생각합니다. 코드를 한 줄도 작성해 본 적이 없으신 분들도 걱정 마세요 - 우리는 매우 기본적인 것부터 시작하여 단계적으로 올라갈 테니까요. 이 튜토리얼의 끝을 맺을 때쯤에는 여러분의 웹사이트를 전문적이고 흥미롭게 보이게 만드는 매력적인 로딩 애니메이션을 만들 수 있을 것입니다. 그럼 시작해 보겠습니다!

CSS - Loaders

CSS 로더는 무엇인가요?

코드로 뛰어들기 전에, CSS 로더가 무엇이고 왜 중요한지 이해해 보겠습니다. 웹사이트를 방문하다가 콘텐츠가 로딩되는 동안 회전하는 원이나 뛰는 점을 본 적이 있으신가요? 그게 바로 로더입니다! 이러한 애니메이션은 사용자들에게 시각적 피드백을 제공하여, 뒤에서 무언가가 일어나고 있음을 알립니다. 마치 방문자들에게 " 잠시만 기다려 주세요, 준비 중입니다!"라고 말하는 것과 같습니다.

첫 번째 로더 만들기

이제 손을 dirt up하고 우리의 첫 번째 로더를 만들어 보겠습니다. 간단한 것부터 시작하여 점차 복잡도를 높이겠습니다.

CSS 로더 - 기본 예제

다음은 회전하는 원을 만드는 기본 로더입니다:

<div class="loader"></div>

.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

이를 구성하는 방법을 설명드리겠습니다:

<div> 요소를 만들고 "loader" 클래스를 부여합니다.
CSS에서 이 div를 원으로 스타일링합니다 (border-radius: 50%).
모든 측면에 연한 회색 테두리 (#f3f3f3)를 주고, 상단에는 파란색 테두리 (#3498db)를 줍니다.
animation 속성을 사용하여 회전 효과를 설정합니다:

spin은 우리의 애니메이션 이름입니다.
2s는 애니메이션이 2초 동안 완료된다는 뜻입니다.
linear은 애니메이션 속도가 일정하다는 뜻입니다.
infinite는 무한히 반복된다는 뜻입니다.

@keyframes 규칙은 애니메이션 동안 일어나는 일을 정의합니다. 0도에서 360도로 회전합니다.

이렇게 하면 첫 번째 로더가 완성됩니다. 멋지지 않나요?

border-right 속성을 사용한 로더

이제 약간 다른 접근 방식으로 "채워지는 것처럼 보이는" 시계 방향 로더를 만들어 보겠습니다:

<div class="loader"></div>

.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
border-right: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

여기서 중요한 차이는 border-right: 16px solid #3498db;를 추가한 점입니다. 이렇게 하면 로더가 채워지는 것처럼 보입니다. 시계의 손이 움직이는 것처럼 보이지 않나요?

:before와 :after를 사용한 로더

이제 :before와 :after 가상 요소를 사용하여 더 복잡한 로더를 만들어 보겠습니다. 이는 멋진 "이중 링" 효과를 제공합니다:

<div class="loader"></div>

.loader {
width: 120px;
height: 120px;
position: relative;
}

.loader:before, .loader:after {
content: "";
position: absolute;
border: 8px solid #f3f3f3;
border-radius: 50%;
animation: spin 2s linear infinite;
}

.loader:before {
top: 0;
left: 0;
right: 0;
bottom: 0;
border-top-color: #3498db;
}

.loader:after {
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-top-color: #e74c3c;
animation-delay: 0.5s;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

이 로더는 두 개의 회전하는 원을 만듭니다:

외부 원 (:before)는 파란색 상단 테두리를 가집니다.
내부 원 (:after)는 약간 더 작고 빨간색 상단 테두리를 가지며, 반쯤 지나서 시작합니다.

결과는 매혹적인 이중 링 효과입니다. 멋지지 않나요?

linear-gradient를 사용한 로더

마지막 기법으로 linear-gradient를 사용한 로더를 만들어 보겠습니다. 이는 부드러운 연속적인 색상 전환을 제공합니다:

<div class="loader"></div>

.loader {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(to right, #3498db 50%, #f3f3f3 50%);
animation: spin 1s linear infinite;
}

.loader:before {
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
margin: 10px;
position: relative;
z-index: 1;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

이 로더는 지혜로운 트릭을 사용합니다:

반 이상 파란색과 회색으로 구성된 그라디언트 원을 만듭니다.
:before 가상 요소를 사용하여 위에 흰색 원을 추가합니다.
외부 원이 회전하면서 부드러운 로딩 애니메이션을 만듭니다.

로더 방법 요약

이제 우리가 다루었던 방법의 빠른 참조 표를 제공해 드리겠습니다:

방법	설명	주요 속성
기본 예제	간단한 회전 원	border, border-radius, animation
border-right	시계 방향 채우는 효과	border, border-right
:before과 :after	이중 링 효과	:before, :after, animation-delay
linear-gradient	부드러운 색상 전환	linear-gradient, :before

이렇게 해서 우리는 CSS 로더를 만드는 네 가지 다른 방법을 배웠습니다. 이것들은 시작점일 뿐 - 색상, 크기, 애니메이션을 실험하여 자신만의 독특한 로더를 만들어 보세요.

마무리하며 이 작은 이야기를 공유하고 싶습니다. 저는 처음 CSS를 가르쳤을 때, 로더에 실망한 학생이 있었습니다. 그는 "왜 귀찮게 하죠? 사용자들은 기다리는 것을 싫어합니다!"라고 말했습니다. 하지만 그가 첫 번째 커스텀 로더를 만들었을 때, 그의 눈이 빛났습니다. 그는 이렇게 깨달았습니다. " 작은 기다림도 적절한 애니메이션으로 만약을 기쁜 경험으로 만들 수 있습니다." CSS 로더의 힘 - 기다림을 기다림으로 만드는 것입니다.

그러니 창의적으로 실험해 보세요! 이 기법들을 섞고 조합하고, 가장 중요한 것은 즐겁게 하세요. 웹 개발의 세계에서 창의성은 여러분의 최고의 친구입니다. 행복한 코딩을 기원하며, 다음 번에 만나기까지 로더를 계속 돌리세요!

Credits: Image by storyset