최근에는 facebook이나 instagram 등을 중심으로 많은 앱에서도 보게 되어 온, 로드시에 표시되는 UI 플레이스홀더. (스켈레톤 디자인이라고도 함)

페이지 로딩시 사용자의 체감 속도를 높이기 위한 하나로서 유효한 수단입니다.
그런 UI 자리 표시자를 HTML과 CSS에서만 만들었습니다.

결국 이것을 만들



코드는 github에서 확인할 수 있습니다.
htps : // 기주 b. 코 m / 소 r / 우이 p ぁ 세호 l

STEP1

먼저 ui-placeholder를 만들기위한 상자를 만듭니다.

HTML

<div class="placeholder-wrapper">
  <div class="placeholder-item">
  </div>
</div>

CSS

.placeholder-item {
  background: #fff;
  border: 1px solid;
  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
  border-radius: 3px;
  padding: 15px;
  margin: 0 auto;
  max-width: 480px;
  min-height: 156px;
  box-sizing: border-box;
}

STEP2

css의 배경으로 animation 할 배경을 설정합니다.
css3 의 그라데이션을 사용해 농담을 붙입니다.

HTML

<div class="placeholder-wrapper">
  <div class="placeholder-item">
    <div class="animated-background">
    </div>
  </div>
</div>

CSS

...

.animated-background {
  background: #f6f7f8;
  background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
  background-size: 800px 104px;
  height: 135px;
  position: relative;
}

STEP3

STEP2에서 설정한 배경을 animation을 사용하여 움직입니다.

CSS

...

.animated-background {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderAnimation;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
  background-size: 800px 104px;
  height: 135px;
  position: relative;
}

@keyframes placeHolderAnimation{
  0% {
    background-position: -400px 0
  }
  100% {
    background-position: 400px 0
  }
}

animation의 세세한 설정 방법은 아래에서 확인하십시오.
CSS의 @keyframe, animation 속성 사용법

STEP4

컴퍼넌트가 아닌 부분(애니메이션 시키고 싶지 않은 부분)을 숨겨 가도록(듯이) div 를 배치해 갑니다.
아래 이미지의 검은 테두리로 둘러싸인 곳에 배경의 흰색 div를 배치해 가는 이미지입니다.

HTML

  <div class="placeholder-wrapper">
    <div class="placeholder-item">
      <div class="animated-background">
        <div class="background-masker head-top"></div>
        <div class="background-masker head-left"></div>
        <div class="background-masker head-right"></div>
        <div class="background-masker head-bottom"></div>
      </div>
    </div>
  </div>

CSS

...

.background-masker {
  background: #fff;
  position: absolute;
}

.background-masker.head-top,
.background-masker.head-bottom {
  top: 0;
  left: 70px;
  right: 0;
  height: 5px;
}

.background-masker.head-bottom {
  top: 25px;
  height: 10px;
}

.background-masker.head-left,
.background-masker.head-right {
  top: 5px;
  left: 70px;
  height: 20px;
  width: 15px;
}

.background-masker.head-right {
  left: 325px;
  width: 123px;
}

최종 STEP

후에는 오로지 div 로 숨기는 위치를 조정하면서 목적의 형태를 만들어 갑니다.

HTML

  <div class="placeholder-wrapper">
    <div class="placeholder-item">
      <div class="animated-background">
        <div class="background-masker head-top"></div>
        <div class="background-masker head-left"></div>
        <div class="background-masker head-right"></div>
        <div class="background-masker head-bottom"></div>
        <div class="background-masker subhead-left"></div>
        <div class="background-masker subhead-right"></div>
        <div class="background-masker subhead-bottom"></div>
        <div class="background-masker content-top"></div>
        <div class="background-masker content-first-end"></div>
        <div class="background-masker content-second-line"></div>
        <div class="background-masker content-second-end"></div>
        <div class="background-masker content-third-line"></div>
        <div class="background-masker content-third-end"></div>
      </div>
    </div>
  </div>

CSS

...

.background-masker.content-top,
.background-masker.content-first-end,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end {
  top: 70px;
  left: 0;
  right: 0;
  height: 15px;
}

.background-masker.content-first-end {
  top: 85px;
  left: 380px;
  height: 12px;
}

.background-masker.content-second-line {
  top: 97px;
  height: 8px;
}

.background-masker.content-second-end {
  top: 105px;
  left: 320px;
  height: 10px;
}

.background-masker.content-third-line {
  top: 115px;
  height: 9px;
}

.background-masker.content-third-end {
  top: 124px;
  left: 440px;
  height: 11px;
}

기타

제작 끝난 후에 애니메이션하는 부분의 높이 등을 바꾸거나 하면 하나하나의 div 의 위치를 ​​변경해야 하기 때문에 매우 귀찮습니다.
우선은 sketch나 photoshop 등으로 디자인 캠프를 만들어 높이 등을 결정하고 나서 실장에 들어가는 편이 좋다고 생각합니다.

각 STEP에 대한 코드는 github에서 확인할 수 있습니다.
htps : // 기주 b. 코 m / 소 r / 우이 p ぁ 세호 l