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

irbees2008 Опубликовано - 17 - мая Интерфейс

Адаптировал: 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);
            }