Индикатор показывает что страница сайта загружается
Красивый индикатор будет сопровождать своим движением загрузку страницы сайта до её полной загрузки. Как только страница будет полностью загружена, а так же при нажатии мышкой на пространство страницы индикатор исчезнет. В качестве индикатора применяется элемент созданный свойствами 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>
| Вы будете первый кто оставит комментарий | |
|
|
|
|
|
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
