🔥 Создайте красивую скелетную анимацию загрузки с помощью CSS Grid

Улучшите взаимодействие с пользователем во время загрузки контента с помощью CSS Grid для создания адаптивного дизайна и волшебства загрузки скелетов.

вступление

Если вы веб-дизайнер или разработчик, вы знаете, что создание надежного пользовательского интерфейса является ключом к успеху любого веб-приложения, поскольку оно предотвращает внезапное бегство пользователей. Одним из небольших, но мощных инструментов в вашем арсенале является скелет загрузки. Скелет загрузки – это визуальный заполнитель, который имитирует макет конечного контента во время его загрузки. Это помогает сократить воспринимаемое время ожидания, а также поддерживает вовлеченность и заинтересованность ваших пользователей, пока они ждут. В этой статье вы узнаете, как создать адаптивный скелет загрузки с помощью CSS Grid. К концу этого руководства вы сможете создать скелет загрузки, который будет отлично смотреться на любом устройстве. Мы собираемся достичь следующего результата:

Давайте начнем! 🏃

Настройка структуры HTML

Прежде чем мы углубимся в анимацию CSS, важно иметь прочную структуру HTML. Это облегчит нацеливание на элементы, которые мы хотим стилизовать в нашем скелете загрузки.

Сначала создайте элемент-контейнер для каркаса загрузки. Это может быть div с классом "loading-skeleton" или что-то подобное. Внутри этого контейнера мы добавим элементы, имитирующие макет конечного контента. Например, если вы создаете скелет загрузки для сообщения в блоге, вы можете добавить элементы для названия, автора, даты и основной основной текст.

Важно присвоить каждому из этих элементов класс или идентификатор, чтобы мы могли ориентироваться на них в нашем CSS. Например, вы можете предоставить элементу заголовка класс «название», а элементу автора — класс «автор». Это позволит нам применять стили именно к этим элементам.

<div class="loading-skeleton">
  <div class="title"></div>
  <div class="author"></div>
  <div class="date"></div>
  <div class="body-text"></div>
</div>
.title, .author, .date, .body-text {
  background: linear-gradient(90deg, #d9d9d9, #f2f2f2, #e6e6e6, #f5f5f5);
}

Выполнив эти шаги, вы получите прочную HTML-структуру, готовую к стилизации с помощью CSS Grid.

Использование CSS Grid для макета

Теперь, когда у нас есть HTML-структура, пришло время приступить к стилизации нашего скелета загрузки с помощью CSS Grid. CSS Grid – это мощный инструмент компоновки, позволяющий легко создавать макеты на основе сетки. Он идеально подходит для создания адаптивного скелета загрузки, который отлично смотрится на любом устройстве.

Во-первых, нам нужно настроить таргетинг на элемент контейнера в нашем CSS и установить для его свойства display значение grid. Это активирует макет CSS Grid для элемента-контейнера и его дочерних элементов.

.loading-skeleton {
    display: grid;
}

Далее мы определим структуру сетки и макет скелета загрузки. Мы можем использовать свойства grid-template-columns и grid-template-rows, чтобы определить количество столбцов и строк в нашей сетке, а grid-template -areas для определения расположения различных элементов.

.loading-skeleton {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
    grid-template-areas:
        "title title title"
        "author date body-text";
}

В этом примере мы определили сетку с 3 столбцами и сетку с 2 строками, где элемент заголовка занимает всю первую строку, элемент автора занимает первый столбец второй строки, элемент даты занимает вторую строку. столбец второй строки и элемент body, занимающий последний столбец второй строки.

С помощью grid-template-areas мы можем определить положение каждого элемента в сетке, что упрощает создание целостного дизайна. Для этого мы должны установить имя grid-template-area для каждого из дочерних элементов сетки:

.title {
  grid-area: title;
}
.author {
  grid-area: author;
}
.date {
  grid-area: date;
}
.body-text {
  grid-area: body-text;
}

Вот наш окончательный результат:

Добавляем анимацию и последние штрихи

Теперь, когда у нас есть твердый макет и интервалы для нашего скелета загрузки, пришло время добавить анимацию и последние штрихи, чтобы оживить его.

Один из способов добавить анимацию — использовать анимацию ключевых кадров CSS. Мы можем использовать свойство animation для определения анимации и правило @keyframes для определения поведения анимации. Например:

@keyframes loading {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

А затем прикрепите анимацию к элементам загрузки в скелете:

.title, .author, .date, .body-text {
  background: linear-gradient(90deg, #d9d9d9, #f2f2f2, #e6e6e6, #f5f5f5);
  background-size: 400% 400%;
  animation: gradient 3s ease-in-out infinite;
}

Также неплохо было бы добавить несколько последних штрихов к дизайну загрузочного каркаса. Например, вы можете изменить animation-timing-function, чтобы создать более интересную анимацию, и добавить немного border radius к элементу загрузки.

.title, .author, .date, .body-text {
  border-radius: 10px;
  background: linear-gradient(90deg, #d9d9d9, #f2f2f2, #e6e6e6, #f5f5f5);
  background-size: 400% 400%;
  animation: gradient 3s ease-in-out infinite;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

Это наш окончательный результат:

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

Заключение

Поздравляем! Вы успешно создали адаптивный каркас загрузки с помощью CSS Grid.

Мы надеемся, что это руководство дало вам четкое представление о том, как создать скелет загрузки и как это может улучшить взаимодействие с пользователем. Используя скелет загрузки, вы можете сократить предполагаемое время ожидания, поддерживать вовлеченность и интерес пользователей, пока они ждут загрузки контента, и создать отточенный адаптивный дизайн, который отлично смотрится на любом устройстве.

Мы рекомендуем вам продолжать экспериментировать с различными дизайнами и анимациями, чтобы создать скелет загрузки, соответствующий потребностям и стилю вашего проекта. И не забудьте протестировать загрузочный скелет на разных размерах экрана и устройствах, чтобы убедиться, что он отлично выглядит и работает правильно.

Спасибо за чтение и счастливого кодирования!

Узнать больше