Как сделать загрузку на сайте


Добавлено: 18.09.2018, 20:21 / Просмотров: 64373
Закрыть ... [X]

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

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

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

Сама суть прелоадера заключается в том, что пока загружается сайт, мы видим только блок «#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>

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

парочка анимированых индикаторов загрузкипарочка анимированых индикаторов загрузкипарочка анимированых индикаторов загрузкипарочка анимированых индикаторов загрузкипарочка анимированых индикаторов загрузкипарочка анимированых индикаторов загрузки143парочка анимированых индикаторов загрузкипарочка анимированых индикаторов загрузкипарочка анимированых индикаторов загрузкипарочка анимированых индикаторов загрузкипарочка анимированых индикаторов загрузкиКак сделать прелоадер для сайта (индикатор загрузки)

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

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

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

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

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

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

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


Источник: https://bloggood.ru/vebmasteru/kak-sdelat-preloader-dlya-sajta-indikator-zagruzki.html/


Прелоадер для сайта на javascript или как не показывать сайт пока


Как сделать загрузку на сайте

Похожие новости


Все самодельное в одном месте
В чем хранить курагу и чернослив в домашних условиях
Как сделать турники на даче
Как сделать так чтобы не потели ладони
Оболочка для изготовления колбас в домашних условиях
Как сделать ловушку от воров на даче
Противотуманные фары установить своими руками
Как быстро снять отек с ног в домашних условиях




ШОКИРУЮЩИЕ НОВОСТИ