Создать загрузку страницы сайта как на YouTube
 | |
| Думаю вы все знаете как загружается страница на YouTube и здесь на сайте можете сделать. Также подогнать его по цветовой гамме под свой интернет ресурс. Правильно называется прелоадер, что и означает загружается страница. Мы просто будем видеть по верх сайта полосу, которая будет идти быстро в правую сторону и когда она пропадет, тогда полностью страница закружена. Здесь почти веса не должно быть, это просто визуально, кто то ставит круги, а здесь можно подойти оригинально. Просто вы будете в курсе как погружается та или иная страница на сайте и чем она больше веси, тем вы эту полосу будите видеть больше. Что по установке, то тут все очень просто, надо вам следовать как написано и все поставите. Это скрипт как основа, и стили, что вы можете сами там что то изменить, на характеристику работы не повлияет. Скачать также можете текстовые документы, где все прописано. Установка: CSS: Код .preloader { position: fixed; top: 0; left: 0; right: 0; z-index: 1999999999; } .preloader.immune { bottom: 0; } .preloader.white { background-color: rgba(255, 255, 255, .3); } .preloader.black { background-color: rgba(1, 1, 1, .3); } .preloader > i.radial-loader:not(:required) { -moz-animation: radial-loader .5s infinite linear; -webkit-animation: radial-loader .5s infinite linear; animation: radial-loader .5s infinite linear; border-color: #ea6052; border-style: solid; border-width: 2px; border-right-color: transparent; border-radius: 100%; display: block; position: relative; float: right; margin: 10px; overflow: hidden; width: 10px; height: 10px; } .preloader > span.loading-bar { -moz-animation: loading-bar 3s 1; -webkit-animation: loading-bar 3s 1; animation: loading-bar 3s 1; display: block; height: 2px; background-color: #ea6052; opacity: 0; transition: width .5s; } .preloader > span.loading-bar.red-colored { background-color: #ea6052; } .preloader > .red-colored.radial-loader { border-color: #ea6052 !important; border-right-color: transparent !important; } .preloader > span.loading-bar.blue-colored { background-color: #3498db; } .preloader > .blue-colored.radial-loader { border-color: #3498db !important; border-right-color: transparent !important; } .preloader > span.loading-bar.green-colored { background-color: #2ecc71; } .preloader > .green-colored.radial-loader { border-color: #2ecc71 !important; border-right-color: transparent !important; } .preloader > span.loading-bar.yellow-colored { background-color: #f1c40f; } .preloader > .yellow-colored.radial-loader { border-color: #f1c40f !important; border-right-color: transparent !important; } /* Animations */ @-moz-keyframes loading-bar { 0% { width: 0%; opacity: 1; } 90% { width: 90%; opacity: 1; } 100% { width: 100%; opacity: 0; } } @-webkit-keyframes loading-bar { 0% { width: 0%; opacity: 1; } 90% { width: 90%; opacity: 1; } 100% { width: 100%; opacity: 0; } } @keyframes loading-bar { 0% { width: 0%; opacity: 1; } 90% { width: 90%; opacity: 1; } 100% { width: 100%; opacity: 0; } } @-moz-keyframes radial-loader { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes radial-loader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes radial-loader { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } Осталось подключить js скрипт в нижнюю часть сайта перед /body Код <script> function preloader(immune, background, color) { $('body').prepend('<div class="preloader"><span class="loading-bar"></span><i class="radial-loader"></i></div>'); if (immune == true) { $('body > div.preloader').addClass('immune'); } if (background == 'white') { $('body > div.preloader').addClass('white'); } else if (background == 'black') { $('body > div.preloader').addClass('black'); } if (color == 'red') { $('body > div.preloader span.loading-bar').addClass('red-colored'); $('body > div.preloader i.radial-loader').addClass('red-colored'); } else if (color == 'blue') { $('body > div.preloader span.loading-bar').addClass('blue-colored'); $('body > div.preloader i.radial-loader').addClass('blue-colored'); } else if (color == 'green') { $('body > div.preloader span.loading-bar').addClass('green-colored'); $('body > div.preloader i.radial-loader').addClass('green-colored'); } else if (color == 'yellow') { $('body > div.preloader span.loading-bar').addClass('yellow-colored'); $('body > div.preloader i.radial-loader').addClass('yellow-colored'); } $(window).load(function () { setTimeout(function () { $('.preloader').fadeOut(1000); }, 1000); setTimeout(function () { $('.preloader').remove(); }, 2000); }); } ; preloader(true, 'black', 'red'); </script> После установки вы можете теперь удивить своего пользователя. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 7 | |
|
| |
