Прелоадеры Flat на GIF для сайта
 | |
| Вашему вниманию представлен стильный набор анимации Flat прелоадер, которые идут формате GIF, что 2 современных набора на выбор. Как уже было сказано, что идет два набора, это квадратные, что также анимация на всех присутствует и круглые, но здесь как понимаете для вам очень большой выбор, что можете скачать и выбрать под свой интернет ресурс. Думаю многим не нравится, когда вы заходите на сайт и начинает идти загрузка, то в этом случай вы не уведите страницу, но смотря под какой скрипт поставлен будет, но здесь после всего, страница полностью только откроется, когда она полностью загрузиться. В самих прелоадерах будет использоваться самые модные оттенки цвета в плоском виде. Где безусловно можно найти тот, что отлично впишется под ваш дизайн на интернет ресурсе. Так же вам будет представлен в нескольких размерах, но безусловно все они дублируются. Если говорить про размеры, то здесь идет 32-32, потом удвоена на 64-64 и также 128-128 пикселей. Но и к загрузки, здесь больше сделано, чтоб просто время быстрей прошло, и вот для этого и создали, и теперь вы скрасите и время быстро пройдет в таком случай в ожидание загрузки любой страницы или модулей, вообщем здесь идет под полный портал. Здесь можете скачать квадратные  Здесь можете скачать круглые  PS - не забываем, при установке, сайт немного загрузит, так как все красивое, всегда идет с весом. Установка Прелоадера на сайтТеперь переходим к установки на сайт прелоадера через скрипт. Все очень не сложно, для начало находим изображение и прописываем ссылку на его в коде и потом уже ставим в низ сайта, для того, чтоб на всех страницах эта функция появлялась. После как пропишите, то перезагрузите страницу и увидете уже в работе материал. Вставьте код в «Нижнюю часть сайта»: Код <div class="someclass"> <div class="loading"> <div class="loading_in"> <img src="http://zornet.ru/zorner_ru_1/Veb/96994448.gif" alt="" /> </div> </div> </div> <script type="text/javascript"> jQuery(function($) { $(window).load(function () { $(".someclass").fadeOut(700); }); }); </script> <style type="text/css"> .someclass {background:rgba(0,0,0,0.8);position:fixed;top:0;left:0;right:0;bottom:0;z-index:5000;display:table;width:100%;height:100%;} .loading {display:table-cell;width:100%;height:100%;vertical-align:middle;text-align: center;} .loading_in {display:inline-block;padding:40px;background:#FFF;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px} </style> На этом все! Источник: Yraa | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 6 | |
|
| |
