/* Обнуление */
*,*:before,*:after{
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
/* Стили для демонстрации */
html,body{
    height: 100%;
    background-color: #333;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #fff;
    font-size: 25px;
}
.wrapper{
    height: 100%;
    padding: 50px;
}
/* Основные стили */

.preloader-2{
    position: fixed; /* Чтобы окно загрузки распологалось в зависимости от страницы, а не от элементов на странице */
    left: 0;
    top: 0;
    width: 100%; /* Чтобы окно загрузки занимало всю ширину и высоту нашего окна */
    height: 100%;
    background: black;
    z-index: 3; /* Чтобы не было видно наших элементов. Можно повысить z-index, если не перекрывает элементы */
    transition: 1s all; /* 1 секунда на все свойства */
    opacity: 1;
    visibility: visible;
    background: url("../img/loading.gif") center center no-repeat; /* Чтобы не повторялся и централизовывался */
    background-color: #1E1E1E; /* Фон вокруг гифки */

    .loader{ /* Будет простая анимация, пока страница не загрузится */
        width: 100%; /* ЧТобы влезли 100% */
        height: 75px;
        line-height: 75px;
        text-align: center;
        position: absolute; /* Разместить по центру прелоадер */
        left: 50%;
        top: 35%; /* Можно по центру (50%), но будет перекрывать собой гифку */
        transform: translate(-50%, -50%);
        font-size: 75px; /* Размер шрифта */
    }

    &.done{  /* Чтобы при загрузке страницы, гифка с прелоадером исчезла */
        opacity: 0;
        visibility: hidden;
    }
}

.preloader{
    position: fixed; /* Чтобы окно загрузки распологалось в зависимости от страницы, а не от элементов на странице */
    left: 0;
    top: 0;
    width: 100%; /* Чтобы окно загрузки занимало всю ширину и высоту нашего окна */
    height: 100%;
    background: black;
    z-index: 3; /* Чтобы не было видно наших элементов. Можно повысить z-index, если не перекрывает элементы */
    transition: 1s all; /* 1 секунда на все свойства */
    opacity: 1;
    visibility: visible;

    .loader{ /* Будет простая анимация, пока страница не загрузится */
        width: 75px;
        height: 75px;
        border: 10px solid #fff;
        border-radius: 50%; /* Круглой формоы */
        border-top-color: blue;
        position: absolute; /* Разместить по центру прелоадер */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: spin 2s linear infinite;
        /* Анимация: название spin, время анимации 2 секунды (если меньше - ускорится анимация) */
        /* infinite - количество воспроизведений, linear - тайм-функция */
    }

    &.done{  /* Чтобы при загрузке страницы, гифка с прелоадером исчезла */
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}