• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Прелоадеры (Loader) для сайта на HTML и CSS (Набор стильных загрузчиков (Loader) для сайта)
Прелоадеры (Loader) для сайта на HTML и CSS
Kosten
Понедельник, 22 Апреля 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44268
Награды: 70
Заметили, что существует большое количество загрузчиков на основе 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, индикатор отложенной загрузки изображений, предварительный загрузчик изображений и многое другое.

Демонстрация
Прикрепления: 8492746.png (9.6 Kb) · Loader.txt (22.1 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Прелоадеры (Loader) для сайта на HTML и CSS (Набор стильных загрузчиков (Loader) для сайта)
  • Страница 1 из 1
  • 1
Поиск: