» »

Прелоадеры Flat на GIF для сайта

Прелоадеры 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
13.05.2017 Просмотров: 689 Комментарий: (6)

Поделиться в социальных сетях

Материал разместил

Комментарий: 6
Scheme
Scheme 13.05.2017 19:521
0
Интересно, что то заманчиво, все есть, попробовать, и тестового нет, чтоб посмотреть, хотя что тут установить.
Kosten
Kosten 13.05.2017 20:012
0
Если интернет шустрый, то пролайдер быстро прокрутит, скрипт то работает, до полной загрузки, пока гребанное колесико не покрутиться с браузере, будет пролайдер.
Maryges
Maryges 13.05.2017 20:063
0
Иногда случается, что сервера виснут, это может быть баннер счетчик, и вот повиснет и сколько придется ждать.
tsakonter
tsakonter 13.05.2017 20:114
0
Так, что из за какого то счетчика не ставить, есть такое, все виснет, но не каждый день же это происходит, но если раз в месяц, и то на небольшое время.
Марковичь
Марковичь 13.05.2017 20:175
0
Здесь можно двояко рассмотреть все эти ситуаций. Это хорошая загрузка страницы, что появится на несколько секунд, что можно посчитать как приложение красивое на сайте. Есть сайты, которые набиты скриптами, что явно не очень быстро загрузка происходит, здесь подключается прелоадер, и в каком то смысле он скрашивает ваше время до получение результата.
Critic©
Critic© 14.07.2017 23:546
0
Кстати один прелоадер круглый видел на игровом сайте по серверу
avatar