Loader – это иконка-спиннер, которая крутится, пока загружается ваша страница. Так то я против таких лоадеров, потому что из-за них кажется, что страница загружается дольше, и она отображается полностью только после загрузки всего контента и всех скриптов. Лоадер нужен для страниц, на которых контент перестраивается скриптами, то есть, вы не увидите нормальный вид страницы, пока всё не загрузится, тогда то лучше, чтобы был лоадер и показывал пользователю уже готовую страницу. Если же Ваш контент нормально отображается и нет необходимости ждать загрузки всех скриптов, тогда отказавшись от лоадера, вы визуально ускорите скорость загрузки сайта в два раза.
Простой лоадер с gif-картинкой
HTML
HTML-код ставим внутри тега body, и если сайт большой с большим количеством контента, стилей и скриптов, тогда лучше ставить данный код выше.
<div class="loader"> <div class="loader_inner"></div> </div>
CSS
html.js .loader { background: none repeat scroll 0 0 #ffffff; position: fixed; bottom: 0; left: 0; right: 0; top: 0; height: 100%; width: 100%; z-index: 9999; } html.js .loader .loader_inner { background-image: url("../img/preloader.gif"); background-size: cover; background-repeat: no-repeat; background-position: center center; background-color: #fff; height: 60px; width: 60px; margin-top: -30px; margin-left: -30px; left: 50%; top: 50%; position: absolute; }
JS
$(window).load(function() { $(".loader_inner").fadeOut(); $(".loader").delay(400).fadeOut("slow"); });
Preloader
Используется такая картинка с размерами 128*128, но в CSS мы зададим ей размеры 60*60
Больше красивых лоадеров-картинок можно скачать здесь https://pixelbuddha.net/freebie/flat-preloaders.
Выглядеть это будет так:
See the Pen Loader with img by Denis (@deniscreative) on CodePen.0
Простой лоадер без картинки
Изменяется только CSS, но для полноты картины добавлю все части:
HTML
<div class="loader"> <div class="loader_inner"></div> </div>
CSS
html.js .loader { background: none repeat scroll 0 0 #fff; height: 100%; width: 100%; position: fixed; bottom: 0; left: 0; right: 0; top: 0; z-index: 9999; } html.js .loader .loader_inner { animation: animate 1.5s linear infinite; clip: rect(0, 80px, 80px, 40px); height: 80px; width: 80px; position: absolute; left: calc(50% - 40px); top: calc(50% - 40px); } @keyframes animate { 0% { transform: rotate(0deg) } 100% { transform: rotate(220deg) } } html.js .loader .loader_inner:after { animation: animate2 1.5s ease-in-out infinite; clip: rect(0, 80px, 80px, 40px); content:''; border-radius: 50%; height: 80px; width: 80px; position: absolute; } @keyframes animate2 { 0% { box-shadow: inset #b3dfd8 0 0 0 17px; transform: rotate(-140deg); } 50% { box-shadow: inset #b3dfd8 0 0 0 2px; } 100% { box-shadow: inset #b3dfd8 0 0 0 17px; transform: rotate(140deg); } }
JS
$(window).load(function() { $(".loader_inner").fadeOut(); $(".loader").delay(400).fadeOut("slow"); });
Больше CSS-спиннеров можно поискать здесь https://icons8.com/cssload/ru и здесь https://codepen.io/collection/HtAne/.
Выглядеть это будет так:
See the Pen Loader for site without img by Denis (@deniscreative) on CodePen.0