Прелоадер JavaScript и CSS

В этой статье я покажу вам как можно легко сделать красивый индикатор загрузки страницы, не используя HTML.

Верней мы будем использовать элементы HTML, но создадим их при помощи JavaScript. Также нам понадобятся стили CSS, чтобы все это дело красиво разукрасить.

preloader

Итак что нам понадобиться:

  • HTML верстка создания на JavaScript.
  • CSS стили для красивого вида прелоадера.
  • И файл изображения логтипа(скачать).

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

Т.к. мы решили не создавать их напрямую в HTML, то сделаем это при помощи JavaSript.

В начале создадим переменную preload, которая будет содержать в себе объект элемента div.

var preload = document.createElement('div');

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

preload.className = "preloader";

Добавим в наш див preloader немного верстки. Див с классом .b-ico-preloader для вращающейся картинки и див с классом .spinner для вращающегося круга с синей границей.

preload.className = "preloader";
preload.innerHTML = '<div class="b-ico-preloader"></div><div class="spinner"></div>';
document.body.appendChild(preload);

И добавим эти все элементы в тег <body>

document.body.appendChild(preload);

Итого у нас должен получится код:

var preload = document.createElement('div');
preload.className = "preloader";
preload.innerHTML = '<div class="b-ico-preloader"></div><div class="spinner"></div>';
document.body.appendChild(preload);

Таким образом, HTML готов к применению стилей.

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

.preloader {
height: 100%;
width: 100%;
background: #fff;
position: fixed;
left: 0;
top: 0;
z-index: 10000;
}

Для того чтобы внутри контейнера .preloader реалистично выглядело 3D поворот логотипа мы зададим всему блоку перспективу равную 1600px и позицию смещения камеры 20% 50%.

Чтобы наш блок, плавно исчезал, на будущее мы приготовили стиль  opacity: 1;.

В итоге у нас получаться так:

 .preloader {
height: 100%;
width: 100%;
background: #fff;
position: fixed;
left: 0;
top: 0;
z-index: 10000;
perspective: 1600px;
perspective-origin: 20% 50%;

/* для плавного исчезновения */
transition: 0.5s all;
opacity: 1;
}

Создадим стили для блока .spinner, это будет кольцо, с неполной синей границей. Чтобы этого добиться, я использовал задал блоку равную шири и высоту в 80px. Сделал границы толщиной в 2px и покрасил все в #f3f3f3. А для нижней границы сделал отдельный стиль, толщина 3px, цвет #0088cf.

Если применить к таком блоку стиль закругления(border-radius) углов со значением 100%, то получим такой интересный эффект.

Плюя ко всему, я добавил нестандартное выравнивание блока по центру экрана, которое работает только при условии если у блока заданы ширина и высота.

Получился такой стиль:

 .spinner {
width: 80px;
height: 80px;
border: 2px solid #f3f3f3;
border-top: 3px solid #0088cf;
border-radius: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

/* Анимация для блока */
animation: spin 1s infinite linear;
}

Также нам необходим создать CSS анимацию для данного блока:

@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

Пришло время логотипа и анимации для него:

 .b-ico-preloader {
background: url(http://weblaboratory.in.ua/wp-content/themes/graphy/images/new_logo.svg);
background-size: cover;
width: 52px;
height: 67px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
animation: ico 5s infinite linear;
transform-style: preserve-3d;
}
@keyframes ico {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}

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

Проверять загрузилась ли страница и если да, то добавлять к блоку .preloader класс .fade, который отвечает за скрытие окна.

Благодаря стилю transition: 0.5s all; это будет происходить плавно.

CSS:


.preloader.fade {
opacity: 0;
}

JavaScript


window.addEventListener('load', function() {
preload.className += ' fade';
setTimeout(function(){
preload.style.display = 'none';
},600);
})

Это все. Вы можете добавлять это прелоадер на свой сайт, изменять стили и картинки.

!!! Важно: Скрипт необходим добавлять в самом вверху страницы, но после открытого тега <body>. Иначе скрипт не сработает, т.к. тег <body> еще не был создан в DOM странице.

Скачать конечный результат можно тут — Скачать пример

Результат

Просмотреть на CodePen — Перлоадер на CSS и JavaScript

0

  • Друзья пишите свои комментарии, буду рад ответить!