HTML 및 CSS를 사용하여 뼈대 로드 작성

TLDR；

작업 코드의 최종 버전: https://codepen.io/amitkhonde/pen/XWgjNeR
React CodeSandbox 링크: https://codesandbox.io/s/skeleton-loading-demo-6dwee
React Github 링크: https://github.com/amitkhonde/skeleton-loading-demo

소개하다.

오늘날의 인터넷 개발 세계에서 사용자가 당신의 사이트에 끌리는 것을 확보하는 것이 가장 중요한 일이다.이를 위해 디자이너와 개발자는 가장 아름다운 UI를 제안했다.
그러나 또 다른 유틸리티 UI와 어깨를 나란히 하는 것은 관련 정보다.오늘날 처리해야 할 데이터의 양이 대폭 증가함에 따라 가장 강력한 서버라도 데이터를 반송하는 데 1초가 걸린다.
이것은 사용자의 체험을 끌어들이는 까다로운 부분이다.기다리는 것을 좋아하는 사람은 없다.A recent study 페이지의 로드 지연이 1초 동안 발견되면 고객 만족도가 16% 감소합니다.46%의 사용자는 로드 시간이 부족한 사이트를 다시 방문하지 않는다.
이 문제를 극복하기 위해 사용자 체험 엔지니어는 골격 탑재 해결 방안을 제시했다.뼈대 로드는 말 그대로 화면에 표시할 내용과 구조의 뼈대를 사용자에게 보여줍니다.
이것은 두 가지 목적이 있다.

사용자는 멋진 애니메이션을 통해 참여한다.

사용자는 뼈대가 내용이 나타날 위치를 표시하기 때문에 정보를 어디서 볼 수 있는지 알고 있다.

이 문서에서는 CSS 애니메이션을 사용하여 뼈대 로드 효과를 만드는 방법에 대해 설명합니다.보상으로, 나는 코드샌드박스 프로젝트와 Github 저장소를 연결하여, 내가 React에서 그것을 어떻게 사용하는지 이해할 것이다.자, 시작합시다.

HTML 및 CSS를 사용하여 뼈대 로드 작성

우선 우리의 결과가 어떻게 나올지 보고 한 걸음 한 걸음 진행해 봅시다.학습에 편리하도록 우리는 데이터를 받을 때까지 골격 탑재 상황을 표시하는 사용자 카드를 개발할 것이다.

단계 1: HTML 태그 추가

이 단계에서는 위의 그림에 표시된 기본 HTML 태그만 추가합니다.우리는 학부모 한 명div과 반 한 명user-card이 있다.그것은 모든 내용의 용기를 충당한다.내부user-card에 우리는 세 개의 원소가 있다.

div 사용자의 개인 정보 사진에 사용됩니다.

paragraph 사용자 이름에 사용됩니다.

paragraph 사용자의 e-메일입니다.

그렇습니다.이곳에는 화려한 물건이 없다.그것을 더 잘 이해할 수 있도록 코드를 봅시다.

<div class="user-card">
  <div class="profile-pic"></div>
  <p class="name"></p>
  <p class="status"></p>
<div>

2단계: 뼈대 클래스 CSS 추가

이 단계에서는 user-card 및 하위 요소에 CSS를 추가합니다.user-card에 우리는 기본적인 충전재와 테두리를 추가했다.모든 아이에 대해 우리는 min-width와 min-height를 더한다.
하위 요소에 min-width와 min-height 속성을 추가하는 것은 매우 중요하다. 어떤 원소에도 내용이 존재하지 않으면 비어 있기 때문이다.
이 단계에서 우리는 skeleton류에 기본 양식을 추가할 것이다.이 클래스는 애니메이션을 불러오는 것을 표시합니다.우리는 지금 우리skeleton반background-color#a5a5를 주고 있다.애니메이션 속성animation: skeleton-animation 1s infinite ease-in-out을 추가하여 4가지 작업을 나타냅니다.

애니메이션의 이름입니다.

애니메이션의 지속 시간.

애니메이션의 주파수.

전환 시간 기능ease-in-out은 애니메이션이 시작과 끝날 때 느린 운행을 나타낸다.

뼈대 로드 애니메이션을 표시하려는 모든 요소에 클래스skeleton를 추가해야 합니다.
현재 CSS가 어떤 모습인지 다음 단계에서 실제 애니메이션을 추가합니다.

.user-card {
  padding: 8px 16px;
  border: 1px solid #a5a5a5;
  border-radius: 3px;
  max-width: 200px;
  text-align: center;
}

.user-card .profile-pic {
  height: 100px;
  width: 100px;
  border-radius: 100%;
  margin: auto;
}

.user-card .name, .user-card .status {
  min-width: 100px;
  min-height: 24px;
}

.user-card > * {
  margin: 16px 0px;
}

.skeleton {
  background-color: #a5a5a5;
  animation: skeleton-animation 1s infinite ease-in-out;
}

3단계:애니메이션 추가

이것은 마지막이자 가장 중요한 걸음이다.이 단계에서 실제 애니메이션을 추가합니다.우리의 애니메이션 이름은 skeleton-animation (앞에서 정의한 것) 이다.애니메이션에서 0%, 50% 및 100% 단계를 정의합니다.이러한 단계의 CSS는 요소들이 특정 단계를 어떻게 보는지를 정의합니다.

0%에서는 opacity를 0.2로 설정합니다.

50%에서 우리는 opacity를 0.5로 늘릴 것이다.

100%에 우리는 다시 opacity0.2로 회복할 것이다.

이렇게 하면 우리의 원소가 끊임없이 제거되고 추가되는 것처럼 보일 것이다.이것이 바로 우리가 원하는 골격 탑재 효과다.이제 이론은 충분하다.코드를 검사한 후에 코드의 최종 버전으로 넘어갑시다.

@keyframes skeleton-animation {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.2;
  }
}

주의: 만약 CSS 애니메이션을 모른다면, 나는 네가 한번 훑어보는 것을 강력히 건의한다. this MDN tutorial

최종 코드

예!!우리는 이미 모든 절차를 완성했고, 우리의 골격은 이미 준비가 다 되었다.최종 코드와 결과를 봅시다.
https://codepen.io/amitkhonde/pen/XWgjNeR

보상: 실제 React 프로젝트에서 Skeleton을 사용하는 방법

현재 우리는 애니메이션을 불러오는 기본 지식을 어떻게 추가하는지 이해했다. 다음은react 예시 항목이다. 나는 그 중에서 이 애니메이션을 사용했다.이 프로젝트에서 가상 API에서 사용자 목록을 가져왔는데, 완성되기 전에 골격 마운트는 사람을 흥미진진하게 하는 사용자 체험으로 나타날 것이다.코드를 마음대로 편집하고 개선하세요.
React CodeSandbox 링크: https://codesandbox.io/s/skeleton-loading-demo-6dwee

결론

나는 뼈대가 적재되는 효과에 도달할 수 있는 많은 방법을 안다.우리도 많은 도서관을 이용하여 이 목표를 실현할 수 있다.그러나 내가 보기에 우리가 사용하는 기본 지식을 이해하는 것은 매우 중요하다.프로젝트에서 이 문제를 어떻게 해결했는지 아래에서 평론해 주십시오.뼈대 로드에 대한 자세한 내용을 보려면 마지막으로 제공된 링크를 참조하십시오.그 전에 즐거움 코딩!!

한층 더 읽고 비디오테이프

네트워크 개발자
그 IT 직원
케빈 메타Skeleton Loader: An overview, purpose, usage and design
이 글은 originally published here입니다.이런 재미있는 책을 더 많이 읽는다visit my blog.