Библиотека для создания скелета загрузки страницы Placeholder Loading

Создание анимированного скелета для страницы до её загрузки сейчас довольно популярно. Это отвлекает внимание пользователя от пустой страницы, тем самым снижая вероятность того, что он не дождётся окончательной загрузки страницы. Скелеты сейчас используют такие крупные сервисы как Facebook, Vkontakte, YouTube, Aliexpress и многие другие. Данная библиотека поможет вам быстро и просто создавать такие скелеты.

Из этого урока вы узнаете:

• Создание простейшего скелета страницы
• Создание более сложного скелета страницы

1) Создание простейшего скелета страницы

Как обычно, для начала необходимо добавить библиотеку к себе. Сделать это можно двумя способами.

• Через npm:

В данном случае нужно ввести следующую команду:

npm install placeholder-loading --save

• Через CDN:

Для этого в тег head нужно добавить следующий код:

<link rel="stylesheet" href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css">
</head>

Ссылка на CDN: https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css

Также данную библиотеку можно скачать и добавить себе в проект напрямую.

Добавив библиотеку в свой проект, можно перейти к созданию первого скелета страницы. Напишем внутри тега body такой код:

И сразу получим такой результат(gif):

Разберем, что здесь произошло:

• Класс .ph-item представляет собой контейнер, в котором находится наш будущий скелет.
• Внутри находится класс .ph-col-12. Это элемент скелета. Цифра 12 здесь означает число колонок, которые он занимает. Если вы когда-то работали с такими CSS-фреймворками как Bootstrap или Foundation - вам будет знакомо это понятие. Максимальное число колонок - 12. Соответственно, элемент с .ph-col-12 будет растянут практически на всю ширину экрана, а элемент с .ph-col-6, например, будет растянут лишь на половину экрана.
• Элемент .ph-picture представляет скелет картинки.
• .ph-row представляет ряд элементов. В блоке .ph-row находятся элементы, имитирующие текст. Атрибут big делает текстовый элемент большим. Атрибут empty скрывает видимость элемента. Это можно делать для создания отступов в скелете.

Так мы создали первый простейший скелет страницы. Далее мы разберем возможности данной библиотеки для создания более интересных скелетов страниц.

2) Создание более сложного элемента страницы

Из перечисленных выше блоков и собирается скелет. Также существует ещё один элемент - .ph-avatar. Он имитирует окно с аватаркой пользователя. Попробуем собрать что-то сложнее. Например, вот такой скелет(gif):

• Создадим контейнер .ph-item. В скелете сперва идёт аватарка .ph-avatar и текст справа от неё. Начнем с них.
• Аватарка на глаз занимает около 15% страницы. Примерно это 2 колонки из 12. Поэтому создадим элемент .ph-col-2 и внутри этого элемента положим .ph-avatar.
• Теперь разберемся с текстом. Создадим рядом с .ph-col-2 обычный блок div без класса. Тогда он растянется на всю доступную оставшуюся ширину. В нашем случае он будет занимать 10 колонок.
• Внутри элемента div создадим элемент .ph-row, чтобы обернуть текстовые элементы в один ряд.
• Внутри .ph-row создадим элемент .ph-col-4 - это первая строка текста, она как раз занимает 4 колонки.
• Чтобы создать видимость пустого пространства, нам нужно создать элемент .ph-col-8 с дополнительным классом empty, так мы заполним остаток строки пустым пространством.
• Ниже текстовый блок занимает половину доступного ему пространства - тогда создадим рядом с .ph-col-4 и .ph-col-8 элементы .ph-col-6 и .ph-col-6 с дополнительным классом empty.
• Текстовая строка последней строчки занимает 2 колонки. Соотвественно, создаем рядом с прошлыми элементами .ph-col-2 и .ph-col-10 с дополнительным классом empty.

Полученный код на данный момент будет выглядеть так:

А результат на данный момент такой:

• Теперь займемся следующим блоком - большая фотография, и текст вплоть до следующей фотографии.
• Создадим элемент .ph-col-12, внутрь него положим элемент .ph-picture (фотография) и .ph-row (обертка для текста).
• В элементе .ph-row первый текстовый элемент занимает приблизительно 10 колонок. Кроме того - он толще чем остальные. Поэтому создаем .ph-col-10 с дополнительным классом big и пустой .ph-col-2, чтобы заполнить строку до конца.
• Далее все происходит аналогично, для второго и первого блока получается следующий код:

А результат пока получается такой:

• Осталось реализовать последний блок. Для начала создадим .ph-col-4 - это будет обертка для скелета картинки.
• Внутри неё создадим .ph-picture.
• Рядом создадим блок div, который заполнит все оставшееся пространство.
• Внутри этого блока создадим обертку .row для текста.
• Внутри .row создаем текст аналогично всем предыдущим блокам текста.

Код будет таким:

И вот наш результат:

В результате мы получили неплохой скелет загрузки, который уместился в приблизительно в 40 строк. На основе этой информации вы можете создавать свои более сложные макеты и внедрять их в качестве скелета перед загрузкой страницы.

Надеемся, что информация была актуальна и полезна. Изучайте и применяйте изученное в своих проектах.

До скорой встречи!

Ссылка на канал: https://t.me/sitodel