• Главная
  • Карта сайта
Не найдено

Главная Новости

Как сделать прелоадер для сайта (индикатор загрузки)

Опубликовано: 06.09.2018

Всем привет!

При открытии любого веб-сайта нам приходится ждать от 1 секунды до, кто знает, какого времени, пока загрузится страничка полностью.  И пока грузится страничка, верстка сайта может ездить в разные стороны, придавая сайту исключительно привосходно-уродливый вид .

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

Как это работает?

Сама суть прелоадера заключается в том, что пока загружается сайт, мы видим только блок « #preloaders », в котором содержится анимированное изображение, иконка или даже обычная прикольная картинка. После того, как веб-страница загрузилась, блок « #preloaders » с изображением исчезнет и появится полностью загруженный сайт.

Приступим к реализации.

Чтобы сделать прелоадер для сайта, вставьте вот этот код сразу после тега <body> :

<!-- индикатор загрузки --> <div id="preloaders"> <img src="zagryz.gif"> </div>

zagryz.gif – это анимированная картинка  

В CSS напишите вот так:

#preloaders { position: fixed; /*фиксированное положение блока*/ left: 0; /*положение элемента слева*/ top: 0; /*положение элемента сверху*/ right: 0; /*положение элемента справа*/ bottom: 0; /*положение элемента снизу*/ background: #fff; /*цвет заднего фона блока*/ z-index: 1001; /*располагаем его над всеми элементами на странице*/ } #preloaders img { font-size: 70px; /*размер иконки*/ position: absolute; /*положение абсолютное, позиционируется относительно его ближайшего предка*/ left: 50%; /*слева 50% от ширины родительского блока*/ top: 50%; /*сверху 50% от высоты родительского блока*/ margin: -35px 0 0 -35px; /*смещение иконки, чтобы она располагалась по центру*/ }

Теперь можем в самом низу, перед закрывающим тегом </body> , вставить вот такой код:

<script> $(window).load(function() { $('#preloaders').find('img').fadeOut().end().delay(400).fadeOut('slow'); }); </script>

Вот вам парочка анимированых индикаторов загрузки:

Остальные анимированых индикаторов загрузки вы можете посмотреть на этом сайте -  preloaders.net/ru

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

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

Популярные статьи:

Добавить комментарий

Метки: Вебмастеру , для сайта , эффекты для сайта

Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss