Створення плейсхолдера завантаження за допомогою Sass

Ви проходите через офіс на роботі, читаючи новини на своєму телефоні, входите в ліфт. Намагаєтесь завантажити нову сторінку, але бачите лише набридливий спінер. Нікому таке не подобається.

Неминуче, що деякі ваші користувачі матимуть слабке з'єднання. Добре продуманий дизайн має враховувати зміни швидкості мережі й відображати користувачеві стан завантаження. Тим не менше, змушуючи користувача витріщатись на колесо, що крутиться, ви можете суттєво збільшити кількість відмов. Можливо є кращий спосіб?

Скелетони екранів (Skeleton Screens)

Скелетони екранів створюють ефект очікування контенту, в той час як завантажувальні спінери (і прогрес бари) фокусують увагу на відрізку часу, який потрібно чекати. Apple навіть включила скелетони екранів в інструкцію по UI iOS. Вони рекомендують початково відображати схему застосунку без тексту чи елементів, які будуть змінюватись. Це може покращити відчуття від будь-яких дій, що тривають більше, ніж кількасот мілісекунд.

Приклади

До цього часу, ви ймовірно бачили деякі приклади скелетонів екрані у щоденному перегляді, навіть не помітивши. Facebook показує користувачам сірі кола та лінії, які представляють вміст посту у їхньому життєписі. І не тільки Facebook.

LinkedIn також переробив свій макет під використання заповнювачів.

Та на Codeguida 😎

Ви можете змусити своїх користувачів думати, що ваш веб-сайт завантажується швидше за допомогою скелетонів екранів. Погляньмо, як можна досягнути цього ефекту за допомогою HTML та Sass.

Створення заповнювача

Спочатку створіть базову структуру. У цьому прикладі заповнювач повинен представляти текстову область. Ми будемо використовувати BEM (Base - Element - Modifier) для найменування класів.

<div class='text-input__loading'>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
</div>

Кожен рядок повинен бути приблизно такої ж висоти, як і наш текст. Можна використати анімацію для створення ефекту пульсації.

&--line {
   height: 10px;
   margin: 10px;
   animation: pulse 1s infinite ease-in-out;
}

Далі визначимо, як анімація повинна працювати. Ми можемо модифікувати прозорість фонового кольору за допомогою rgba від 0.0 до 1.0.

@keyframes pulse {
   0% {
      background-color: rgba(165, 165, 165, 0.1)
    }
    50% {
       background-color: rgba(165, 165, 165, 0.3)
    }
    100% {
       background-color: rgba(165, 165, 165, 0.1)
    }
}

Також потрібно змінювати ширину кожної лінії завантаження. Створимо Sass міксин, щоб застосувати цей вміст до кожного nth-child у списку.

@mixin nth-children($points...) {
   @each $point in $points {
      &:nth-child(#{$point}) {
         @content;
        }
    }
}

Ми можемо використати новостворений міксин, щоб змінити ширину всіх 10 дочірніх div елементів.

@include nth-children(1, 5, 9) {
   width: 150px;
}
@include nth-children(2, 6, 10) {
   width: 250px;
}
@include nth-children(3, 7) {
   width: 50px;
}
@include nth-children(4, 8) {
   width: 100px;
}

Результат 🎉

Приклад на CodePen:

Існує також бібліотека React, яка називається react-placeholder, що досягає такого ж ефекту.