logo

Выберите город
Max-Webs – компания федерального уровня, в которой работают высококлассные специалисты.

Preloader для сайта

22 июля 2016 в 4:05 CSS,Javascript (JS),Блог веб-разработчика
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...
НЕТ ВРЕМЕНИ ЧИТАТЬ СТАТЬЮ?
Но вам требуется помощь в настройке Preloader для сайта ? Получите индивидуальную мини-консультацию по Скайпу или WhatsApp.

Цена: 500 руб.Оформить заказ и оплатить

Если вы собираетесь делать все самостоятельно — продолжайте чтение!

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]

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

Оставить заявку
Консультация наших специалистов совершенно бесплатна и ни к чему вас не обязывает. Наш маркетолог проанализирует ваши ответы и свяжется с Вами в ближайшее время.

Какие услуги вас интересуют? *

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

В каком регионе планируете работать ? *

Сколько заявок в месяц вам необходимо получать? *

Средний чек за продажу товара/услуги ? *

Вкратце опишите свою деятельность и причину обращения: *

Представьтесь, пожалуйста: *

Как с вами связаться? *

Контактный номер телефона: *

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

Бюджет на реализацию *



Запрос демо версии
Дорогой клиент, демо версию мы можем бесплатно реализовать для вас в течении 1-2 дней. Уточните детали вашего бизнеса.

Пришлите 1-5 ссылок на сайты вашей тематики которые вам нравятся. Так же можете приложить ссылки на фото(скрншоты)

Представьтесь, пожалуйста: *

Как с вами связаться? *

Контактный номер телефона: *

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

Добавить комментарий, если необходимо



[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Оставить заявку
Консультация наших специалистов совершенно бесплатна и ни к чему вас не обязывает. Наш маркетолог проанализирует ваши ответы и свяжется с Вами в ближайшее время.

Какие услуги вас интересуют? *

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

В каком регионе планируете работать ? *

Сколько заявок в месяц вам необходимо получать? *

Средний чек за продажу товара/услуги ? *

Вкратце опишите свою деятельность и причину обращения: *

Представьтесь, пожалуйста: *

Как с вами связаться? *

Контактный номер телефона: *

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

Бюджет на реализацию *



[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Запись на бесплатный урок
Введите ваше имя, телефон и e-mail.
Я свяжусь с Вами для уточнения времени прохождения урока.

Как вас зовут *

Как с вами связаться? *

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

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



[contact-form-7 404 "Not Found"]
Заказать сайт
Первые 14 дней бесплатно. Оставьте номер email и контактный телефон. Я лично перезвоню Вам в течение 10 минут, для обсуждения деталей.


Ваш email

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

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

Проблемы с оплатой?
Опишите ситуацию. Когда возникает проблема? Что планируете купить?

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

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

Что необходимо доработать

Скачать чек-лист
Заполните поля ниже. В течение 10 минут на указанный e-mail будет отправлена ссылка на скачивание чек-листа.

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

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

[contact-form-7 404 "Not Found"]
Заказать обратный звонок
Я свяжусь с Вами в течение 10 минут и отвечу на все Ваши вопросы.

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

Как с вами связаться? *

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



Степень загрузки
В данном разделе представлена моя занятость в данный момент. Данные обновляются каждый день. Вся работа выполняется по предварительной записи и 20% предоплатой от стоимости проекта.
низкая загрузка. выполняется ~5 заказов. старт работ через 5 дней.
средняя загрузка. выполняется ~15 заказов. старт работ через 20 дней.
высокая загрузка. заказы временно не принимаются.
Задать вопрос
У вас есть вопросы адресованный интернет-маркетологу? А у меня ответы, добро пожаловать! И да, это бесплатно. Я отвечу вам в течение 24 в разделе вопрос-ответ.
[contact-form-7 404 "Not Found"]