Как сделать прелоадер для сайта (индикатор загрузки)
Опубликовано: 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
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: Вебмастеру , для сайта , эффекты для сайта