소개

로더(또는 로딩 스피너)는 로딩 시간 동안 시각적 피드백을 제공하여 사용자 경험을 향상시킵니다. 이 튜토리얼에서는 HTML과 CSS를 사용하여 세련되고 현대적인 로더를 만들어 보겠습니다. 뛰어들어 보세요!

로더란 무엇입니까?

로더는 콘텐츠가 처리되고 있음을 나타내는 애니메이션 요소입니다. 이는 사용자에게 애플리케이션이 작동하고 있음을 보장하여 로딩 시간 동안 좌절할 가능성을 줄입니다.

로더를 사용하는 이유는 무엇입니까?

• 사용자 경험 향상: 기다리는 동안 사용자에게 계속 정보를 제공합니다.
• 미적 측면 향상: 잘 디자인된 로더를 사용하면 웹사이트를 더욱 전문적으로 보이게 만들 수 있습니다.
• 사용자 이탈 방지: 시각적 피드백을 제공함으로써 사용자가 기다리는 동안 떠날 가능성이 줄어듭니다.

1단계: HTML 구조 설정
로더의 기본 HTML 구조부터 시작하겠습니다. 다음 코드는 12개의 막대가 있는 로더용 컨테이너를 만듭니다.

2단계: CSS를 사용한 스타일링
다음으로 CSS를 추가하여 로더의 스타일을 지정하겠습니다. 애니메이션 막대가 있는 원형 로더를 생성하는 코드는 다음과 같습니다.

`.loader {
위치: 상대;
너비: 54px;
높이: 54px;
테두리 반경: 10px;
}

.loader div {
너비: 8%;
높이: 24%;
배경: rgb(128, 128, 128);
위치: 절대;
왼쪽: 50%;
상단: 30%;
불투명도: 0;
테두리 반경: 50px;
상자 그림자: 0 0 3px rgba(0,0,0,0.2);
애니메이션: fade458 1s 선형 무한;
}

@keyframes fade458 {
에서 {
불투명도: 1;
}

에게 {
불투명도: 0.25;
}
}`

3단계: 애니메이션 추가
동적 로딩 효과를 생성하기 위해 각 막대에 회전 및 애니메이션 지연을 적용하겠습니다.

`.loader .bar1 {
변환: 회전(0도) 변환(0, -130%);
애니메이션 지연: 0초;
}

.loader .bar2 {
변환: 회전(30도) 변환(0, -130%);
애니메이션 지연: -1.1초;
}

.loader .bar3 {
변환: 회전(60도) 변환(0, -130%);
애니메이션 지연: -1초;
}

.loader .bar4 {
변환: 회전(90도) 변환(0, -130%);
애니메이션 지연: -0.9s;
}

.loader .bar5 {
변환: 회전(120deg) 변환(0, -130%);
애니메이션 지연: -0.8s;
}

.loader .bar6 {
변환: 회전(150deg) 변환(0, -130%);
애니메이션 지연: -0.7s;
}

.loader .bar7 {
변환: 회전(180deg) 변환(0, -130%);
애니메이션 지연: -0.6s;
}

.loader .bar8 {
변환: 회전(210deg) 변환(0, -130%);
애니메이션 지연: -0.5초;
}

.loader .bar9 {
변환: 회전(240deg) 변환(0, -130%);
애니메이션 지연: -0.4s;
}

.loader .bar10 {
변환: 회전(270deg) 변환(0, -130%);
애니메이션 지연: -0.3초;
}

.loader .bar11 {
변환: 회전(300deg) 변환(0, -130%);
애니메이션 지연: -0.2초;
}

.loader .bar12 {
변환: 회전(330deg) 변환(0, -130%);
애니메이션 지연: -0.1초;
}`

4단계: 웹사이트에 로더 통합
웹 프로젝트에서 로더를 사용하려면 파일에 HTML과 CSS를 포함해야 합니다. 로더의 HTML 마크업을 원하는 위치에 배치하면 로드 프로세스 중에 로더가 나타납니다.

결론

로더를 만들면 웹사이트의 사용자 경험을 크게 향상시킬 수 있습니다. 간단한 HTML과 CSS를 사용하면 시각적으로 매력적이고 기능적인 로더를 구축할 수 있습니다. 웹사이트 디자인에 맞게 색상과 크기를 실험해보세요!