웹사이트에 로딩 중 이미지를 만드는 이유
웹사이트나 애플리케이션을 사용할 때, 페이지가 로딩되는 동안 사용자가 아무것도 하지 않고 기다리게 되는 순간이 있습니다. 이때 사용자가 기다리고 있다는 사실을 시각적으로 알려주는 로딩 중 애니메이션을 사용하는 것은 매우 중요한 요소입니다. 특히 HTML과 CSS로 로딩 중 이미지를 만들면 사용자 경험을 크게 향상시킬 수 있습니다. 이제 그 이유를 하나씩 살펴보겠습니다.
인터넷 속도가 느린 경우, 웹사이트의 콘텐츠가 로드되는 데 시간이 걸릴 수 있습니다. 이때, 로딩 이미지를 제공하면 사용자는 페이지가 멈춘 것이 아니라 로드가 진행 중이라는 것을 알 수 있습니다. 로딩 애니메이션을 보여주는 것만으로도 사용자는 기다리며 불안감을 줄일 수 있습니다.
샘플화면
LOADING
샘플소스
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로딩 중 애니메이션</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.loader-container {
display: flex;
justify-content: center;
align-items: center;
}
.loader-wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
border: 12px solid #f3f3f3; /* 배경 색 */
border-top: 12px solid #ffb3b3; /* 시작 색 */
border-radius: 50%;
width: 80px; /* 원의 크기 */
height: 80px; /* 원의 크기 */
animation: spin 2s linear infinite, colorChange 10s linear infinite; /* 색상 변화 추가 */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* 그림자 정중앙으로 */
}
.loading-text {
font-size: 12px; /* 텍스트 크기 */
color: #333; /* 텍스트 색상 */
width:100%;
font-weight: bold;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 텍스트를 정확히 중앙에 배치 */
z-index: 1; /* 텍스트가 원 위에 오도록 설정 */
animation: blinkText 1s infinite alternate; /* 텍스트 깜빡임 애니메이션, 주기 1초 */
}
/* 애니메이션 설정 (원만 회전) */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 원의 색상이 파스텔 색상으로 변경되는 애니메이션 */
@keyframes colorChange {
0% {
border-top-color: #ffb3b3; /* 연한 분홍색 */
}
10% {
border-top-color: #b3ffb3; /* 연한 초록색 */
}
20% {
border-top-color: #b3d9ff; /* 연한 파란색 */
}
30% {
border-top-color: #fff0b3; /* 연한 노란색 */
}
40% {
border-top-color: #ffc0cb; /* 연한 핑크색 */
}
50% {
border-top-color: #f0e68c; /* 카키색 */
}
60% {
border-top-color: #d3d3d3; /* 연한 회색 */
}
70% {
border-top-color: #ffb6c1; /* 연한 분홍색 */
}
80% {
border-top-color: #e0ffff; /* 연한 민트색 */
}
90% {
border-top-color: #f5deb3; /* 밀크색 */
}
100% {
border-top-color: #ffb3b3; /* 연한 분홍색 */
}
}
/* 텍스트 깜빡임 애니메이션 */
@keyframes blinkText {
0% {
opacity: 0.2; /* 투명도 0.2 */
}
100% {
opacity: 1; /* 투명도 1 */
}
}
</style>
</head>
<body>
<div class="loader-container">
<div class="loader-wrapper">
<div class="loader"></div>
<div class="loading-text">LOADING</div>
</div>
</div>
</body>
</html>728x90
반응형
LIST
'HTML CSS' 카테고리의 다른 글
| 아이폰 position:sticky가 안 된다구요? (18) | 2025.04.15 |
|---|---|
| 이미지 업로드 후 썸네일까지?! HTML로 실시간 미리보기 (+코드예제) (7) | 2025.04.14 |
| input type tel 연락처만 입력받고, 패턴과 유효성을 확인 (1) | 2025.03.07 |
| 아이폰 사파리에서 폰트가 제대로 안먹힌다면! (1) | 2025.03.07 |
