Индикатор показывает что страница сайта загружается
Красивый индикатор будет сопровождать своим движением загрузку страницы сайта до её полной загрузки. Как только страница будет полностью загружена, а так же при нажатии мышкой на пространство страницы индикатор исчезнет. В качестве индикатора применяется элемент созданный свойствами CSS3, Вам будет предложено 3 вида индикаторов разных моделей. Для подключения подобного эффекта у себя на сайте Вам достаточно скопировать код из примера любого из понравившихся индикаторов. Для отображения индикатора на всех страницах сайта установите код в "Нижней части", если Вам хочется чтобы на разных страницах были разные индикаторы, поместите скрипт на нужных страницах модулей перед закрывающим тегом </body>. Для работы индикатора загрузки страницы требуется наличие подключенной библиотеки jQuery. Если у Вас появились проблемы в установке, опишите проблему и укажите адрес в стандартной форме для комментариев. Остальные темы не являющиеся техническими могут быть рассмотрены в форме комментариев ВКонтакте.
Варианты примеров индикаторов для установки
Прямоугольный индикатор с красивым эффектом анимационного перехода 5 отдельных полос, для просмотра индикатора в работе перейдите на сайт Русских шрифтов для сайта где он подключен в реальном времени.
<script> document.write(unescape(' %3C%73%74%79%6C%65%20%74%79%70%65%3D%22%74%65%78%74%2F%63%73%73%22%3E%40%69%6D%70%6F%72%74%20%75%72%6C%28%22%68%74%74%70%3A%2F%2F%64%65%6C%61%69%73%61%69%74%2E%75%63%6F%7A%2E%72%75%2F%63%73%73%2F%65%66%66%65%63%74%2F%69%6E%64%69%63%61%74%6F%72%2D%73%74%72%69%70%73%2E%63%73%73%22%29%3B%3C%2F%73%74%79%6C%65%3E ')); </script> <a id="indicator-close" onclick="document.getElementById('indicator-close').style.display='none';"> <div class="indicator-block"></div> <div class="indicator-load"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div style="position:relative;top:-29px;bottom:-29px;height:auto;"></div> </a> <script> $(function(){ $(window).load(function() { $('.indicator-block,.indicator-load').delay(1000).fadeOut(600); }); }); </script>
Круглый индикатор с прямоугольными лепестками создаёт визуальный эффект вращения, посмотрите его в работе на сайте Counter Strike 1.6 Unity 3D.
<script> document.write(unescape(' %3C%73%74%79%6C%65%20%74%79%70%65%3D%22%74%65%78%74%2F%63%73%73%22%3E%40%69%6D%70%6F%72%74%20%75%72%6C%28%22%68%74%74%70%3A%2F%2F%64%65%6C%61%69%73%61%69%74%2E%75%63%6F%7A%2E%72%75%2F%63%73%73%2F%65%66%66%65%63%74%2F%69%6E%64%69%63%61%74%6F%72%2D%72%6F%75%6E%64%2E%63%73%73%22%29%3B%3C%2F%73%74%79%6C%65%3E ')); </script> <a id="indicator-close" onclick="document.getElementById('indicator-close').style.display='none';"> <div class="indicator-block"></div> <div class="indicator-load"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div style="position:relative;top:-25px;bottom:-25px;height:auto;"></div> </a> <script> $(function(){ $(window).load(function() { $('.indicator-block,.indicator-load').delay(1000).fadeOut(600); }); }); </script>
Индикатор загрузки с эффектом вращающихся точек подключен на одном из первых моих сайтов посвящённому игре CS на которую было убито не мало времени. Перейдите на сайт Геймера Counter Strike - IZOTOP чтобы посмотреть индикатор в работе.
<script> document.write(unescape(' %3C%73%74%79%6C%65%20%74%79%70%65%3D%22%74%65%78%74%2F%63%73%73%22%3E%40%69%6D%70%6F%72%74%20%75%72%6C%28%22%68%74%74%70%3A%2F%2F%64%65%6C%61%69%73%61%69%74%2E%75%63%6F%7A%2E%72%75%2F%63%73%73%2F%65%66%66%65%63%74%2F%69%6E%64%69%63%61%74%6F%72%2D%70%6F%69%6E%74%73%2E%63%73%73%22%29%3B%3C%2F%73%74%79%6C%65%3E ')); </script> <a id="indicator-close" onclick="document.getElementById('indicator-close').style.display='none';"> <div class="indicator-block"></div> <div class="indicator-load"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div style="position:relative;top:-35px;bottom:-35px;height:auto;"></div> </a> <script> $(function(){ $(window).load(function() { $('.indicator-block,.indicator-load').delay(1000).fadeOut(600); }); }); </script>
Вы можете проверить работоспособность примеров скриптов загрузки страницы в редакторе HTML, для этого нажмите на кнопку в нижнем левом углу страницы,в открывшейся "Панели инструментов" нажмите на кнопку "Редактор HTML", поместите в него библиотеку jQuery, а ниже сам демонстративный код.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
Вы будете первый кто оставит комментарий | |
|
|
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
|