로딩 쉬머!

Loading Shimmer라는 단어를 들었을 때 저는 그것이 웹 개발에 도입된 새로운 멋진 기능이라고 생각했습니다. 그러나 그것은 우리가 일상적인 웹 브라우징에서 이미 알아차린 것임이 밝혀졌습니다.

느린 네트워크로 인해 DOM 콘텐츠를 로드하는 데 시간이 걸리는 경우 콘텐츠가 로드되고 있음을 나타내는 로드 아이콘/gif를 표시했습니다.
로더를 표시하는 OldSchool 방식:



위의 사례는 사용자에게 콘텐츠가 로드되고 있음을 알리는 데 효과적입니다.
그러나 훌륭한 사용자 경험은 아닙니다.
그렇다면 더 나은 사용자 경험을 달성하려면 어떻게 해야 할까요?

스켈레톤 스크린 구조.

로딩 아이콘을 표시하는 대신 완전히 로드되었을 때 콘텐츠가 배치되는 방법과 위치를 나타내는 앱의 샘플 레이아웃을 가질 수 있습니다.

페이스북에서 다음과 같이



이것은 "로딩 쉬머!"



위의 레이아웃은 프로필 사진, 설명 및 캡션을 나타내는 별도의 섹션으로 구성됩니다. 콘텐츠가 로드되는 동안 표시될 수 있는 일반 템플릿입니다.

앱에서 이를 달성하는 방법을 알아봅시다.

CSS와 HTML만으로 완전한 코드를 구현할 것입니다.

전체 코드는 codepen에서 사용할 수 있습니다.

산출:

보일러 플레이트:

다음 HTML에는 프로필 사진과 댓글이 거의 없는 레이아웃이 포함되어 있습니다.

<div class="card br">
   <div class="wrapper">
      <div class="profilePic animate"></div>
      <div class="comment br animate w80"></div>
      <div class="comment br animate"></div>
      <div class="comment br animate"></div>
   </div>
<div>

.br {
  border-radius: 8px;  
}
.w80 {
   width: 80%;
}
.card {
  border: 2px solid #fff;
  box-shadow:0px 0px 10px 0 #a9a9a9;
  padding: 30px 40px;
  width: 80%;
  margin: 50px auto;
}
.profilePic {
  height: 65px;
  width: 65px;
  border-radius: 50%;
}
.comment {
  height: 10px;
  background: #777;
  margin-top: 20px;
}

.card 클래스는 배경과 같은 카드를 제공합니다.

확장 애니메이션:

.wrapper {
  width: 0px;
  animation: fullView 0.5s forwards linear;
}

@keyframes fullView {
  100% {
    width: 100%;
  }
}

.wrapper에는 반짝임을 표시하면서 너비를 0에서 100%로 늘리는 사용자 정의 확장 애니메이션이 있습니다.

쉬머:

.animate {
   animation : shimmer 2s infinite;
   background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
   background-size: 1000px 100%;
}

.animate 클래스에는 'shimmer'라는 이름의 사용자 정의 애니메이션이 있으며 지속 시간은 2초, 무한 횟수(계속 반복됨)입니다.

background는 linear-gradient입니다. 그라디언트가 앞면과 뒷면의 나머지 색상과 병합될 때 그라디언트를 사용해야 합니다.

여기에서 왼쪽에서 오른쪽으로 기울기가 있고 25% 사이의 색상은 #e2e2e2(더 어두운 음영)이고 다른 모든 위치(o에서 4% 및 36%에서 100%)는 #eff1f3임을 나타냅니다. ) (실제 배경색)

background-size는 배경에 width 및 height를 제공하는 데 도움이 됩니다.

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

사용자 정의shimmer 애니메이션에서 애니메이션 시작 부분과 애니메이션 끝 부분에 표시되는 방식을 정의합니다.

따라서 배경의 위치는 폭의 음수 최대값에서 양수 최대값으로 이동합니다.

infinite를 사용했기 때문에 주어진 기간(2초) 동안 계속 발생합니다.

follow 버튼을 탭하는 것을 잊지 마세요 :P

전체 코드는 codepen에서 사용할 수 있습니다.

그게 다야 여러분 :)