Блог
Красивый прелоадер для вашего сайта
Принцип установки простой до безобразия:
- Вставляем CSS в наш файл стилей, не забывая дать путь к нашему анимированному изображению.
- Добавляем HTML код сразу после открывающего тега <body>
- И добавляем код на JQuery.
- Для работоспособности прелоадера, у вас должна быть подключенная библиотека JQuery.
/*-------------------------- -- PRELOADER --------------------------*/ .loader { background: none repeat scroll 0 0 #ffffff; bottom: 0; height: 100%; left: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 9999; } .loader-inner { background-image: url("img/preload.gif"); background-size: cover; background-repeat: no-repeat; background-position: center center; height: 100px; width: 100px; margin: auto; top: 0; right: 0; left: 0; bottom: 0; position: absolute; } /*-------------------------- -- PRELOADER end --------------------------*/ <div class="loader"> <div class="loader-inner"></div> </div> $(document).ready(function(){ $(".loader-inner").fadeOut(); $(".loader").delay(400).fadeOut("slow"); });
0 комментариев