Заметили, что существует большое количество загрузчиков на основе Javascript (jQuery) для динамического контента, однако технология CSS может делать то же самое с лучшей производительностью и меньшим количеством кода.
В этой статье я хотел бы поделиться с вами отобранным списком из оригинальных по дизайну загрузчиков, плюс анимированных с помощью чистого CSS и CSS3, для вашего следующего проекта, для вдохновения или для ваших конкретных пользователей.
Обратите внимание, что все загрузочные счетчики, перечисленные здесь, анимированные с помощью CSS3, поэтому они должны хорошо работать в современных браузерах, которые поддерживают свойства CSS3, такие, как переходы, преобразования, @keyframes, анимации и так далее.
HTML
Код
<div class="dsaced-upokas">
<h1>Комплект погрузчиков</h1>
<h2 class="gedsa">Загрузчик</h2>
<div class="dsaon gedsa">
<div class="span">
<div class="timer"></div>
</div>
<div class="span">
<div class="kedsava-decedugas"></div>
</div>
<div class="span">
<div class="location_indicator"></div>
</div>
<div class="span">
<div class="kedscedugas-upoe"></div>
</div>
</div>
<div class="dsaon gedsa">
<div class="span">
<div class="menkasdugas"></div>
</div>
<div class="span">
<div class="dsacetugas"></div>
</div>
<div class="span">
<div class="help"></div>
</div>
<div class="span">
<div class="kitedsaxaz"></div>
</div>
</div>
<div class="dsaon gedsa">
<div class="span">
<div class="eye"></div>
</div>
<div class="span">
<div class="kitedsak-irsavun"></div>
</div>
<div class="span">
<div class="kogedsakub"></div>
</div>
<div class="span">
<div class="kasdebakov"></div>
</div>
</div>
</div>
CSS
Находится в текстовом документе, который закреплен к материалу.
See the Pen
Pure CSS Loaders kit by Kocsten (@kocsten)
on CodePen.
Остается выбрать нужный элемент под загрузку и использовать их в качестве индикатора загрузки для вашего динамического содержимого, такого как загрузчик AJAX, индикатор отложенной загрузки изображений, предварительный загрузчик изображений и многое другое.
Демонстрация
