CSS, JS прелоадер, кнопка лоадер
Прелоадер - показывается посетителю сайта до того как загрузятся изображения и отрисуется вся страница .
1. Простой
Как использовать
В самом начале страницы, сразу после тега body вставить такой код:
<div class="load-container load8"> <div class="loader">Loading...</div> </div>
Это и есть весь блок прелоадера.
Чтобы после загрузки страницы он исчез, перед закрывающим тегом body вставляем небольшой скрипт:
<script> $(window).load(function () { $(".load-container").delay(100).fadeOut(250); }); </script>
Весь внешний вид и анимация прописываются в CSS:
.load-container { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; z-index: 99999; } .no-cssanimations .load-container .loader { text-indent: 0; text-align: center; color: #fff; font-size: 17px; background: none; border: 0 none; width: auto; height: auto; margin: 1em auto; overflow: visible; box-shadow: none; -webkit-animation: none; animation: none; } .no-cssanimations .load-container .loader:before, .no-cssanimations .load-container .loader:after { display: none; } .load8 .loader { position: absolute; top: 50%; left: 50%; margin-left: -4.3em; margin-top: -4.3em; font-size: 10px; text-indent: -9999em; border-top: 0.6em solid rgba(255, 255, 255, 0.2); border-right: 0.6em solid rgba(255, 255, 255, 0.2); border-bottom: 0.6em solid rgba(255, 255, 255, 0.2); border-left: 0.6em solid #fff; -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; } .load8 .loader, .load8 .loader:after { border-radius: 50%; width: 8em; height: 8em; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
Правда автор рассчитывал на то, что будет подключен скрип "modernizr" для поддержки старых браузеров. Если такой скрипт подключен не будет, можно убрать из CSS стили с классами "no-cssanimations", а именно:
.no-cssanimations .load-container .loader { text-indent: 0; text-align: center; color: #fff; font-size: 17px; background: none; border: 0 none; width: auto; height: auto; margin: 1em auto; overflow: visible; box-shadow: none; -webkit-animation: none; animation: none; } .no-cssanimations .load-container .loader:before, .no-cssanimations .load-container .loader:after { display: none; }
Разное
- Небольшая подборка прелоадеров от smartaddons
- SVG лоадеры: samherbert.net/svg-loaders
- Так же можно использовать gif-ку, вот обзор нескольких сервисов для создания: http://www.manhunter.ru/webmaster/383_generatori_preloaderov.html
- Кнопки лоадеры: codepen.io, zaurmag.ru но лучше уж добавить svg картинку по классу...
Летящий герой
Интересный, скопировал себе. Подсмотрел у демки themexpert.
Ссылки и благодарности
Первый найден на сайте http://forum.getsimplecms.ru, автор: pavlexx.