Простой loader in out. Как?

Question

[VANY]

Подскажите, не хочу писать сам, т.к. (естественно) не уверен в дзене своего кода (скорее я очень далек даже от junior).
Нужен лоадер, который показывается перед отображением страницы и при переходах по сайту. Уверен, open-source и тут не подведет :)

уточню - хочу адаптировать данные переходы tympanus.net/codrops/2014/04/23/page-loading-effects для того, чтобы управлять разными эффектами для разных страниц на сайте. Пока не нашел хотя бы стабильно работающих решений.

Answer 1

[Aligatro]

Если вам необходимо проигрывать лоадер пока не погрузиться весь body, то вот тут есть отличное решение в пару строк js. Если вам необходим более продвинутый функционал, можете попробовать modernizr, ЕМНИП в нем можно повесить событие до полной загрузки страницы. А если ожидание полной загрузки вам не ни к чему можете просто поставить проигрывание анимации в течении какого-то времени (3-5сек) при помощи чистого css.

Comments

[VANY]

Спасибо, а как реализовать анимацию при переходах?

Answer 2

[Виталий Инчин ☢]

Вот такой вариант есть: www.sitehere.ru/effekt-zagruzki-stranicy-sozdanie-...

Comments

[VANY]

Это позаимствовали у триплекса. В том решении мне не хватает того, чтобы по клику на какую-то страницу внутри сайта он опять поднимался. Чтобы переход был бесшовным.

[Виталий Инчин ☢]

Иван Украинцев: ммм...там чуть-чуть переписать как вам надо труда не составит, -вешаете обработчик клика на документ, который проверяет:
1. На ссылку ли вообще кликнули
2. Ссылка ведёт на ваш сайт или на сторонний
Если да - поднимаете загрузчик и через ajax делаете запрос к нужной странице, при получении ответа загрузчик убираете.

[VANY]

Виталий Инчин: я извиняюсь за незнание, но - не кинете хотя бы ссылку на пример? Я ни в js ни в ajax не разбираюсь.

[Виталий Инчин ☢]

Иван Украинцев: ждите, сейчас некрасивый но рабочий пример подгоню....

[Виталий Инчин ☢]

Иван Украинцев: вроде бы так, может где и ошибся (не с ПК набирал), но вроде бы работает - jsfiddle.net/f1tcd9c4/1
Проверяйте на локалке - у jsFiddle свои предпочтения на счет ссылок внутри премеров.

Answer 3

[Денис Инешин]

Используйте обычные гифки: preloaders.net

Comments

[VANY]

та логотип у меня свой будет, в svg. Мне бы логику загрузки выгрузки понять)