집 >웹 프론트엔드 >CSS 튜토리얼 >CSS로 스켈레톤 로더를 생성하고 앱의 UX를 개선하는 방법

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

DDD원래의: 2025-01-24 06:07:10788검색

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

? 최종 결과

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

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

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

? 스켈레톤 로더의 장점

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

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

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

1. 기본 HTML 구조

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

<code class="language-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></code>

2. CSS 스타일

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

<code class="language-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;
}</code>

3. CSS 설명

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

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

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

<code class="language-javascript">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</code>

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

? 결론

스켈레톤 로더는 애플리케이션에 속도와 전문성이라는 인상을 주어 사용자 경험을 향상시키는 간단하고 효과적인 방법입니다. 프로젝트에 사용해 보세요!

위 내용은 CSS로 스켈레톤 로더를 생성하고 앱의 UX를 개선하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html date int JS idea Imagen ux

성명：

이전 기사：단일 HTML 요소 별점 구성 요소다음 기사：단일 HTML 요소 별점 구성 요소