CSS로 스켈레톤 로더를 생성하고 앱의 UX를 개선하는 방법-CSS 튜토리얼-php.cn

? 최종 결과

? 스켈레톤 로더의 장점

✍️ 이제 작업 시작: 로더 생성

1. 기본 HTML 구조

2. CSS 스타일

3. CSS 설명

4. 실제 콘텐츠 표시(선택 사항)

? 결론

집

웹 프론트엔드

CSS 튜토리얼

CSS로 스켈레톤 로더를 생성하고 앱의 UX를 개선하는 방법

DDD

Jan 24, 2025 am 06:07 AM

스켈레톤 로더를 사용하여 웹사이트에 전문적인 느낌을 더해보세요! 프론트엔드 개발 작업을 하고 있다면 지루한 로딩 스피너는 잊어버리세요. 스켈레톤 로더는 훨씬 더 매력적이고 효율적인 사용자 경험을 제공합니다. 이 튜토리얼에서는 외부 라이브러리 없이도 HTML 및 CSS를 사용하여 쉽게 만드는 방법을 배웁니다.

? 최종 결과

시작하기 전에 얻을 수 있는 결과를 보여드리겠습니다.

Cómo crear un Loader Esqueleto con CSS y mejorar la UX de tu app

이미지, 제목, 텍스트 단락 로딩을 시뮬레이션하는 카드입니다. 단순하지만 우아하고 전문적인 느낌을 줍니다.

? 스켈레톤 로더의 장점

더 뛰어난 속도감: 사용자는 단순한 스피너와 달리 콘텐츠가 로드되는 동안 콘텐츠의 표현을 봅니다.
보다 세련된 디자인: 콘텐츠 미리보기를 제공하여 애플리케이션이 실패했다는 느낌을 피합니다.
쉬운 구현: 추가 복잡성 없이 순수 CSS로 생성됩니다.

✍️ 이제 작업 시작: 로더 생성

이미지, 제목, 텍스트가 포함된 카드를 모방하는 로더를 만들어 보겠습니다.

1. 기본 HTML 구조

다음 구조의 HTML 파일을 생성하여 시작하세요.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skeleton Loader</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="card">
    <!-- Contenido del loader aquí -->
  </div>
  <script src="script.js"></script> </body>
</html>

로그인 후 복사

2. CSS 스타일

다음 CSS 코드를 사용하여 styles.css 파일을 만듭니다.

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}

.card {
  width: 300px;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.skeleton {
  background-color: #e0e0e0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.skeleton::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.skeleton.image {
  width: 100%;
  height: 150px;
  margin-bottom: 16px;
}

.skeleton.title {
  width: 70%;
  height: 20px;
  margin-bottom: 12px;
}

.skeleton.text {
  width: 100%;
  height: 14px;
  margin-bottom: 8px;
}

로그인 후 복사

3. CSS 설명

색상 및 테두리: 밝은 회색(#e0e0e0)과 둥근 모서리를 사용하여 실제 요소를 시뮬레이션합니다.
반짝이 효과: linear-gradient는 @keyframes shimmer을 사용하여 애니메이션 광선 효과를 만듭니다.
현실적인 비율: 각 요소(이미지, 제목, 텍스트)의 크기가 실제 콘텐츠와 유사하도록 정의됩니다.

4. 실제 콘텐츠 표시(선택 사항)

잠시 후에 실제 콘텐츠를 표시하려면 파일에 이 JavaScript 코드를 추가하세요. script.js:

setTimeout(() => {
  document.querySelector('.card').innerHTML = `
    <img src="https://via.placeholder.com/300x150" alt="Imagen de ejemplo">
    <h3>Título del contenido</h3>
    <p>Este es un texto de ejemplo para la tarjeta.</p>
  `;
}, 3000); // Simula una carga de 3 segundos

로그인 후 복사

HTML의 .card 요소 내에서 로더로 표시하려는 각 요소에 맞게 .skeleton, .skeleton.image, .skeleton.title 및 .skeleton.text 클래스를 추가합니다.