Как сделать прелоадер в виде пульсирующего логотипа. Делаем полноценный JS-прелоадер для AJAX-приложения
Использовать или нет на сайте прелоадер - вопрос индивидуальный. Например для одностраничника, с минимальным количеством графики и изображений, такая штука не нужна.
Рассмотрим другую крайность - сайт для заказа пиццы. Большая часть посетителей заказывают пиццу с мобильника - а это более медленная скорость загрузки сайта в принципе и плюс фотографии. Прелоадер для таких сайтов будет весьма кстати, посетители не будут видеть неприглядный процесс формирования страницы.
Сейчас мы создадим классический вращающийся прелоадер на чистом CSS с применением свойств анимации.
Создадим простенький HTML-код , состоящий из одного пустого тега div с классом loader , не считая конечно тега body .
В файле стилей пропишем весь остальной код. Начало будет напоминать школьный урок геометрии - знакомсво с фигурами.
Стили для класса loaderСначала нарисуем квадрат серого цвета сплошной линией толщиной в 2 пикселя:
Loader {
border: 2px solid #eae4ea;
}
с шириной и высотой по 150 пикселей:
Loader {
width: 150px;
height: 150px;
}
Всего одной строчкой кода квадрат стал кругом:
Border-radius: 50%;
У круга создадим полупрозрачную тень:
Box-shadow: 0 -2px 2px rgba(0,0,0,.2);
А нижнюю рамку покрасим в зеленый цвет:
Border-bottom: 2px solid #6ddfca;
Придумываем свое название анимации, один полный оборот круг сделает равномерно за 3 секунды, крутясь бесконечно, пока не загрузится страница.
Animation: loader 3s linear infinite;
Псевдоэлементы:before и:afterОдин круг хорошо, а три круга лучше, тем более, что два из них будут "фейковыми" - только в стилях, благо псевдоэлементы дают на такую возможность.
Рисуем внутренний псевдокруг before внутри реального круга, в диаметре на 20 пикселей (10px+10px) меньше
Loader:before {
content: "";
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
}
c розовой нижней рамкой и крутится он будет быстрее, чем главный круг.
Loader:before {
border-bottom: 2px solid #d355be;
animation: loader 2s linear infinite;
}
Теперь дело за after кругом, он хоть и самый маленький, но зато самый шустрый, з 1 секунду сделает полный поворот и полосочка у него красивая - фиолетовая.
Loader:after {
border-bottom: 2px solid #8c23ec;
animation: loader 1s linear infinite;
}
Отступы after круга от основного круга - 22 пикселя.
Top: 22px;
left: 22px;
bottom: 22px;
right: 22px;
Пришло время запускать наши круги, делает это свойство transform: rotate - что значит поворот. 0% - старт, а 100% - финиш. Каждый круг повернется на 360 градусов.
Многие программисты оптимизируют JavaScript и CSS-код, чтобы страница грузилась быстрее.
Но не все они делают прелоадеры, которые дают пользователю эффект субъективно более быстрой загрузки.
Способ №1. Дешево и сердито.
Идея проста - необходимо поместить по центру картинку, которая будет показывать пользователю, что страница все еще загружается. Код довольно прост, пишем сразу после :
В результате у нас сразу после загрузки появляется блок с анимированным прогрессбаром по центру страницы. Параметр overflow нужно менять для того, чтобы не появилась полоса прокрутки и пользователь не мог прокрутить вниз и поглядеть на содержимое странички.
Потом, когда все загрузилось - нужно убрать прелоадер и установить overflow в положение visible.
Эту часть кода я поместил в файл с JS-функциями, plreloader1.js
Если делать прогрессбар из анимированного GIF-рисунка, то он может получиться слишком тяжелым, порой даже больше самой странички, где его размещают.
Поэтому лучше нарисовать полоску (например, такую), поставить ее как фон у блока с ID preloader и двигать бекграунд-позишн по таймеру.
И после загрузки делаем вот что:
Результат работы можно посмотреть .
У этого способа есть недостатки — Если ставить скрытие прелоадера на onload, т.е. когда ждать, пока загрузятся все картинки, то пользователь может подумать, что страница просто зависла - фактически кроме анимации ничего не происходит. Если же вешать на $(document).ready() из jQuery, то после исчезновения прелоадера картинки только будут подгружаться.
Поэтому предлагается использовать…
Способ №2. Истина где-то рядом, или джедаи наносят ответный удар.
Для начала нарисуем 2 полосы загрузки - активную и не очень.
Поставим неактивную как фон, а активную сделаем фоном у дива, для которого будем менять ширину в зависимости от процента загрузки.
Progbar_ph.gif – это картинка высотой в 1 пиксель и шириной с нашу полосу прокрутки (данный пример глючит без нее в IE, и я пока не нашел другого способа выровнять по центру див с прогрессбаром).
Стили такие же, как и в предыдущем способе, разве что
Теперь осталось сделать небольшой скрипт, который будет динамически подгружать содержимое сайта и картинки. Он нужен для того, чтобы прогрессбар показывался и изменялся еще до того, как скачается используемый фреймворк и другие JS-файлы.
Возьмем средний сайт, сделанный полностью на AJAX. Загрузка примерно происходит так:
- грузится HTML-код
- начинают грузиться картинки
- затем некий фреймворк
- дополнительные JS-файлы (хотя лучше все склеить в один)
- запускается некая функция (или несколько), которая стягивает дополнительный контент.
Я реализовал 2 метода - первый простой, включается так:
непосредственно перед пишем:
dLoader.start("progbarfg" , 333, "count" );
Первым параметром идет идентификатор блока с активной полосой загрузки в качестве фона, вторым - ширина картинки, третий параметр - это метод, которым будем считать вес контента.
Скрипт сканирует все картинки на страницы и назначает им вес равный 1. Все JS-файлы прописываются в его теле, как я расскажу чуть ниже.
Однако хочется, чтобы вес у каждой единицы контента был не единицей, а реальным объемом в байтах. Да и для AJAX-приложений хотелось бы сразу подгрузить всю графику.
Для этого я написал скрипт на PHP, который сканирует папку с картинками оформления и заносит это все дело с размерами файлов в массив, опционально сжимая.
Так что дописав перед следущее, мы получим прогрессбар, который будет показывать ход загрузки всего контента на странице, после чего плавно исчезнет.
Когда загрузились все JS-файлы, запускаются функции, которые есть в массиве invoke. Если мы с помощью jQuery подгружаем контент, то функция будет выглядить так:
PHP-скрипт делает следующее: он заносит в массив необходимые скрипты с их размерами, а так же картинки и дополнительные функции. Код:
Уже после того, как загрузились все картинки и JS-файлы, вызывается событие onLoad, которое вы указали в функции dLoader.start()
Еще есть способ кастомизации процесса загрузки.
В зависимости от типа веб-ресурса и объема информации на нем, загрузка сайта может занять от нескольких миллисекунд до пары секунд. В процессе загрузки с сайтом может происходить множество вещей: верстка может прыгать в разные стороны, текст может менять начертание. Возникает вполне закономерное желание спрятать всю эту вакханалию подальше от глаз посетителей. Для этого и предназначены прелоадеры.
Прелоадер — это индикатор загрузки сайта. Он может быть выполнен как в виде анимированного gif-изображения, так и в виде шкалы загрузки. Но независимо от внешнего вида прелоадера, принцип его работы будет одним и тем же: как можно раньше показать пользователю индикатор загрузки, а по окончании загрузки этот индикатор скрыть.
Как загружается веб-страницаПрежде чем создать индикатор какого бы то ни было процесса, нужно разобраться в самом процессе. Загрузка веб-страниц — не исключение. Итак, как же загружается веб-страница?
Теперь, понимая порядок загрузки веб-страницы, можно сформировать для себя список задач и условий для нашего прелоадера. Мои условия для него таковы:
- Должен отображаться как можно раньше, закрывая собой весь контент.
- По возможности, отображение не должно зависеть от внешних ресурсов.
- Должен скрываться, как только загрузка страницы полностью завершена. Для скрытия можно использовать любую доступную javascript-библиотеку.
Если ваша страница практически не зависит от графики, то вместо window.onload для скрытия прелоадера можно использовать DOM Ready .
Для решения первой задачи поместим следующий html-код сразу после открывающего тега body:
Для нашего прелоадера нам понадобятся стили, но зависить от внешних файлов мы не хотим, поэтому разместим стили прямо в документе, где-нибудь внутри head:
#page-preloader { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #000; z-index: 100500; } #page-preloader .spinner { width: 32px; height: 32px; position: absolute; left: 50%; top: 50%; background: url("/images/spinner.gif") no-repeat 50% 50%; margin: -16px 0 0 -16px; }
К сожалению, полностью отказаться от внешних ресурсов у меня не выйдет, ведь нам нужно анимированное gif-изображение. Но, учитывая небольшой размер самого изображения, это допустимая жертва.
Теперь осталось только скрыть наш прелоадер после загрузки страницы. Здесь мы уже не ограничены в средствах, поэтому можем использовать jQuery:
$(window).on("load", function () { var $preloader = $("#page-preloader"), $spinner = $preloader.find(".spinner"); $spinner.fadeOut(); $preloader.delay(350).fadeOut("slow"); });
Готово! Теперь вместо скачущей в разные стороны верстки посетитель во время загрузки страницы будет видеть наш аккуратный экран загрузки. А работающую версию такого прелоадера можно увидеть на сайте
Урок, на котором рассмотрим процесс создания прелоадера для страницы (preload page). В качестве прелоадера будем использовать иконку Font Awesome или анимированное изображение gif, которое будет отображаться во время загрузки страницы.
Как сделать прелоадер для сайтаСтраница любого веб-сайта при её открытии не загружается мгновенно. На загрузку и отображение страницы тратиться некоторое время, которое может составлять от 1 до нескольких секунд. Чтобы данный процесс (т.е. процесс загрузки страницы) как-то сгладить для пользователя, ему на это время можно показать анимированное изображение или иконку.
Процесс создания прелоадера довольно прост и заключается в том, что нам необходимо показать некоторый блок (#before-load), содержащий анимированное изображение или иконку, сразу после открытия страницы сайта. А после того как загрузка страницы полностью завершиться, этот блок (#before-load) с анимированным изображением gif или иконкой необходимо скрыть от пользователя.
Создание прелоадера для страницыРазработку прелоадера, который будет выглядеть как белый фон с анимированной иконкой, выполним за 3 шага:
1. Создадим HTML-код, состоящий из блока и иконки Font Awesome. Этот кусок кода необходимо разместить в документе таким образом, чтобы он отобразился пользователю первым, т.е. сразу после открывающего тега body:
2. Создадим стили CSS для блока div и элемента i (иконки).
#before-load { position: fixed; /*фиксированное положение блока*/ left: 0; /*положение элемента слева*/ top: 0; /*положение элемента сверху*/ right: 0; /*положение элемента справа*/ bottom: 0; /*положение элемента снизу*/ background: #fff; /*цвет заднего фона блока*/ z-index: 1001; /*располагаем его над всеми элементами на странице*/ } #before-load i { font-size: 70px; /*размер иконки*/ position: absolute; /*положение абсолютное, позиционируется относительно его ближайшего предка*/ left: 50%; /*слева 50% от ширины родительского блока*/ top: 50%; /*сверху 50% от высоты родительского блока*/ margin: -35px 0 0 -35px; /*смещение иконки, чтобы она располагалась по центру*/ } 3. Добавим сценарий, скрывающий прелодер после загрузки страницы (т.е. когда произойдёт load у объекта window): $(window).load(function() { $("#before-load").find("i").fadeOut().end().delay(400).fadeOut("slow"); });
Если Вы хотите использовать в качестве индикатора прелоадера анимированное изображение gif, то необходимо произвести на вышепредставленных этапах следующие изменения:
В HTML-коде убрать классы Font Awesome:
В стилях CSS произвести следующие изменения (изменить правило #before-load i {..}):
#before-load i { width: 70px; /*ширина gif-изображения*/ height: 70px; /*высота gif-изображения*/ position: absolute; left: 50%; top: 50%; background: url("assets/images/img.gif") no-repeat 50% 50%; /*расположение (url) изображения gif и др. параметры*/ margin: -35px 0 0 -35px; }
Скачать анимированные gif-изображения для Вашего сайта можно с ресурса http://preloaders.net/ или восвпользоваться этим архивом .
Доброго времени суток уважаемые подписчики, читатели и просто посетители нашего сайта! Начинаю этот материал я с новой ступени для себя отсчета, а точнее с 101 урока , который, надеюсь, Вам пригодится и понравится. Вообще, использование прелоадера для сайта широко известная тема среди разных анимации и эффектов, но я замечал, что многие из них, имеют очень громозкий и не удобный код, поэтому решил написать что то попроще и использовал для этого jQuery .
Рассматривая данный материал, хочу заметить, что исполнение данного кода работает каждый раз при обновлении страницы и если Вам потребуется это сделать при нажатии или загрузке страницы, можете написать в комментариях сайте, тогда сможем разобрать более детально данный материал.
И так, прежде чем приступить к изучению кода, я подготовил специально для Вас видеоматериал, с подробным ознакомлением данного урока, который Вы можете также посмотреть, если не хотите читать текст или вдруг у Вас возникли какие-либо вопросы.
Первый шаг. HTML.
Для начала, я решил сделать картинку, которая имеет разрешение GIF формата, что позволяет нам более эффективно использовать прелоадер для сайта. Данную картинку я загрузил в папку img , где и будет также лежать обычная картинка PNG , которая будет использоваться после загрузки страницы.
Теперь, нам стоит подключить необходимые стили и скрипты, чтобы данный код успешно отрабатывал. Подключаем библиотеку jquery.min.js , а также сам скрипт load.js , который и будет выполнять функцию прелоадера. Также не забываем про стили, которые у нас находятся в файле demo.css .
Далее создаем div блок с идентификатором load , который и будет взаимодействовать со скриптом и выполнять данный эффект. После создаем блочный контейнер, в нем размещаем картинку, нашей GIF анимации и чуть ниже выводим какой-то произвольный текст.
Завершаем HTML код простым выводом картинки PNG .
Второй шаг. jQuery.
Сам скрипт очень простой, не знаю нужны ли будут комментарии, но думаю все-таки напишу, чтобы было меньше вопросов. Ну, во-первых, скрипт работает в окне, который выполняет требования идентификатора load . Во-вторых, данному идентификатору присваивается задежка с помощью функции delay в 2500 мс , чтобы как раз таки и был виден данный эффект, после идет функция fadeOut со значением slow , что позволяет показывать нам сам сайт, после задержки. Все достаточно элементарно и просто, как видите.
$(window).on("load", function () { $("#load").delay(2500).fadeOut("slow"); });
Третий шаг. CSS.
Переходим к последнему шагу, в котором пропишем все необходимые стили для правильной работы скрипта. Сразу хочу отметить, что все свойства и значения (кроме, пожалуй, background , text-align ) идентификатора load и load div обязательны, иначе правильно у Вас ничего работать не будет.