Preloader.js – загрузка страницы как на YouTube
827материалов
228тем на форуме
3004комментария
6160пользователей

Preloader.js – загрузка страницы как на YouTube


Описание:

В зависимости от типа веб-ресурса и объема информации на нем, загрузка сайта может занять от нескольких миллисекунд до пары секунд. В процессе загрузки с сайтом может происходить множество вещей: верстка может прыгать в разные стороны, текст может менять начертание. Возникает вполне закономерное желание спрятать всю эту вакханалию подальше от глаз посетителей. Для этого и предназначены прелоадеры.

Прелоадер — это индикатор загрузки сайта. Он может быть выполнен как в виде анимированного gif-изображения, так и в виде шкалы загрузки. Но независимо от внешнего вида прелоадера, принцип его работы будет одним и тем же: как можно раньше показать пользователю индикатор загрузки, а по окончании загрузки этот индикатор скрыть. Я представляю Вашему вниманию прелоадер загрузке страницы как на YouTube. Установка очень проста и не займет много времени.

Установка скрипта:

Для начала подключаем CSS:
Код
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1999999999;
}

.preloader.immune {
    bottom: 0;
}

.preloader.white {
    background-color: rgba(255, 255, 255, .3);
}

.preloader.black {
    background-color: rgba(1, 1, 1, .3);
}

.preloader > i.radial-loader:not(:required) {
    -moz-animation: radial-loader .5s infinite linear;
    -webkit-animation: radial-loader .5s infinite linear;
    animation: radial-loader .5s infinite linear;
    border-color: #ea6052;
    border-style: solid;
    border-width: 2px;
    border-right-color: transparent;
    border-radius: 100%;
    display: block;
    position: relative;
    float: right;
    margin: 10px;
    overflow: hidden;
    width: 10px;
    height: 10px;
}

.preloader > span.loading-bar {
    -moz-animation: loading-bar 3s 1;
    -webkit-animation: loading-bar 3s 1;
    animation: loading-bar 3s 1;
    display: block;
    height: 2px;
    background-color: #ea6052;
    opacity: 0;
    transition: width .5s;
}

.preloader > span.loading-bar.red-colored {
    background-color: #ea6052;
}

.preloader > .red-colored.radial-loader {
    border-color: #ea6052 !important;
    border-right-color: transparent !important;
}

.preloader > span.loading-bar.blue-colored {
    background-color: #3498db;
}

.preloader > .blue-colored.radial-loader {
    border-color: #3498db !important;
    border-right-color: transparent !important;
}

.preloader > span.loading-bar.green-colored {
    background-color: #2ecc71;
}

.preloader > .green-colored.radial-loader {
    border-color: #2ecc71 !important;
    border-right-color: transparent !important;
}

.preloader > span.loading-bar.yellow-colored {
    background-color: #f1c40f;
}

.preloader > .yellow-colored.radial-loader {
    border-color: #f1c40f !important;
    border-right-color: transparent !important;
}
/* Animations */

@-moz-keyframes loading-bar {
    0% {
    width: 0%;
    opacity: 1;
    }
    90% {
    width: 90%;
    opacity: 1;
    }
    100% {
    width: 100%;
    opacity: 0;
    }
}

@-webkit-keyframes loading-bar {
    0% {
    width: 0%;
    opacity: 1;
    }
    90% {
    width: 90%;
    opacity: 1;
    }
    100% {
    width: 100%;
    opacity: 0;
    }
}

@keyframes loading-bar {
    0% {
    width: 0%;
    opacity: 1;
    }
    90% {
    width: 90%;
    opacity: 1;
    }
    100% {
    width: 100%;
    opacity: 0;
    }
}

@-moz-keyframes radial-loader {
    0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
    }
}

@-webkit-keyframes radial-loader {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
}

@keyframes radial-loader {
    0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
}

Теперь подключаем js скрипт в нижнюю часть сайта перед </body>:
Код
<script>
function preloader(immune, background, color) {
    $('body').prepend('<div class="preloader"><span class="loading-bar"></span><i class="radial-loader"></i></div>');
    if (immune == true) {
    $('body > div.preloader').addClass('immune');
    }
    if (background == 'white') {
    $('body > div.preloader').addClass('white');
    } else if (background == 'black') {
    $('body > div.preloader').addClass('black');
    }
    if (color == 'red') {
    $('body > div.preloader span.loading-bar').addClass('red-colored');
    $('body > div.preloader i.radial-loader').addClass('red-colored');
    } else if (color == 'blue') {
    $('body > div.preloader span.loading-bar').addClass('blue-colored');
    $('body > div.preloader i.radial-loader').addClass('blue-colored');
    } else if (color == 'green') {
    $('body > div.preloader span.loading-bar').addClass('green-colored');
    $('body > div.preloader i.radial-loader').addClass('green-colored');
    } else if (color == 'yellow') {
    $('body > div.preloader span.loading-bar').addClass('yellow-colored');
    $('body > div.preloader i.radial-loader').addClass('yellow-colored');
    }
    $(window).load(function () {
    setTimeout(function () {
    $('.preloader').fadeOut(1000);
    }, 1000);
    setTimeout(function () {
    $('.preloader').remove();
    }, 2000);
    });
}
;
preloader(true, 'black', 'red');
</script>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 03.01.2016 в 00:00
Материал просмотрен: 2102 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 7 комментариев

Пожаловаться
Сказать спасибо
Источник

7 комментариев


darkelow
3c956ff @darkelow 03.01.2016 00:341
+5
Спасибо! С новым Годом!
Ромчик
Всегда пожалуйста! И Вас с Новым Годом!!!
DxBArt
DxBArt @DxBArt 03.01.2016 00:393
+5
Спасибо, давно такой скрипт искал) Просто супер humor
uGarts[Krixys]
github.com, там такого полно, вплоть до загрузки отдельных блоков, статических шапок и подвалов, и динамических (загружаемых) блоков, и то по скрипту видно что это не загрузка, а просто выполнение события, параллельного загрузке, я бы переписал первую строчку на
Код
$( document ).ready(function(immune, background, color)
, и выставил бы в тег head, чтобы присвоение элемента было раньше
avatar
добрый день! у меня при загрузке сайта http://robsten.ru/ как раз расползается слайдер. Хотела использовать ваш скрипт, но не помогло, может подскажете в чем дело?

Может дело в том что, вы вот пишете:
Цитата
Теперь подключаем js скрипт в нижнюю часть сайта перед </body>:
но у меня в Нижней части сайта вообще нет </body>, я попыталась вставить код в Страницы сайта, но результата нет depression
BYTEAM
Для своего сайта я брал полоску отсюда: http://github.hubspot.com/pace/docs/welcome/
Там кстати и другие варианты анимации загрузки есть.

До этого был тоже похожий лоад бар, но тот, работал странно, мог исчезнуть до полной загрузки страницы, или наоборот раньше её. Этот же работает совершенно точно. Берите на вооружение )
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта