Время чтения: 2 мин. 22 июля 2016 в 4:05 CSS,Javascript,Блог веб-разработчика
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

Preloader для сайта

preloader

HTML после открытия тега body

[php]
<!— Preloader —>
<div class="preloader"></div>
<!— Preloader end —>
[/php]

JS

[php]
/*=========================================================================
Preloader
=========================================================================*/
$(window).load(function() {
"use strict";
$(".preloader").delay(350).fadeOut(‘slow’);
});
[/php]

CSS

[php]

/*——————————————————————*/
/* PRELOADER */
/*——————————————————————*/
.preloader {
width: 100%;
height: 100%;
background-color: #23475B;
position: fixed;
top: 0;
left: 0;
z-index: 9999999;
}

.preloader:before,.preloader:after {
content: "";
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
top: 50%;
}

.preloader:before {
background-color: #ed5f6b;
left: 50%;
-webkit-animation: animation_left_round 1.8s infinite ease-in-out;
animation: animation_left_round 1.8s infinite ease-in-out;
}

.preloader:after {
background-color: #FFF;
right: 50%;
-webkit-animation: animation_right_round 1.8s infinite ease-in-out;
animation: animation_right_round 1.8s infinite ease-in-out;
}

@-webkit-keyframes animation_left_round {
0%,100% {
-webkit-transform: translate3d(50%,-50%,0);
transform: translate3d(50%,-50%,0);
}

50% {
-webkit-transform: translate3d(-150%,-50%,0);
transform: translate3d(-150%,-50%,0);
}
}

@keyframes animation_left_round {
0%,100% {
-webkit-transform: translate3d(50%,-50%,0);
transform: translate3d(50%,-50%,0);
}

50% {
-webkit-transform: translate3d(-150%,-50%,0);
transform: translate3d(-150%,-50%,0);
}
}

@-webkit-keyframes animation_right_round {
0%,100% {
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}

50% {
-webkit-transform: translate3d(150%,-50%,0);
transform: translate3d(150%,-50%,0);
}
}

@keyframes animation_right_round {
0%,100% {
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}

50% {
-webkit-transform: translate3d(150%,-50%,0);
transform: translate3d(150%,-50%,0);
}
}
[/php]

Похожие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Начать сотрудничество
Заполните поля ниже. Я лично перезвоню Вам в течении 15 минут для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите контактный Email для отправки точной стоимости

или позвоните мне по телефону
+7-499-70-300-44
Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

[contact-form-7 404 "Not Found"]
Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

Введите контактный телефон *

Введите ваше Skype логин *

Введите контактный E-mail *

Выберите программу

Введите ваше имя *

Введите контактный email *

Сообщение

Заказать сайт
Первые 14 дней бесплатно. Оставьте номер email и контактный телефон. Я лично перезвоню Вам в течении 10 минут, для обсуждения деталей.


Ваш email

Введите контактный телефон

Комментарий или вопрос