Хаки и Скрипты Next Generation CMS

Прелоадер с затемнением фона

irbees2008 irbees2008 Опубликовано - 17 - мая Интерфейс
4446 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Сегодня я опишу как поставить на Ваш сайт прелоадер с затемнением фона и текстом в центре при переходе между страницами.
И так приступим
1. В конец main.tpl, перед закрывающим тегом body добавьте:

Код:
<div class="someclass">
<div class="loading">
Идёт загрузка, ждите...
</div>
</div>
<script>
jQuery(function($) {
$(window).load(function () {
$(".someclass").fadeOut(500);
});
});
</script>
2. В файл стилей шаблона добавьте:
Код:
.someclass {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 5000;
}
.someclass .loading {
position: absolute;
top: 50%;
left: 50%;
margin: -40px 0 0 -150px;
width: 260px;
height: 20px;
padding: 20px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font: normal 16px/20px Verdana, Geneva, Arial, Helvetica, sans-serif;
text-shadow: 0 1px 2px #000;
text-align: center;
z-index: 5001;
border: solid 2px #000;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.2);
}

Очистите кеш браузера.Все готово.

Можешь почитать и вот эту статейку "HTML теги body "

Опрос

Ваше мнение

TWIG -что это?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [9]
  • Гости: [9]
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 30
  • Генерация страницы: 0.145сек
  • Потребление памяти: 4.929 Mb 
  •   яндекс.ћетрика