Прелоадер на html и css для своего сайта

Всем здравствуйте. Сегодня мы будем делать красивый прелоадер на чистом html и css, который можно будет использовать на своем сайте. О том, как подключить прелоадер к своему сайту, вы сможете узнать в этой статье Подключение прелоадера с помощью jquery, а как сделать процентный прелоадер вы можете узнать в этой статье Прелоадер на сайт, с процентной загрузкой. И так начнем!

Просмотреть реализацию в YouTube

1. Зачем нужен прелоадер на сайте

Все мы знаем, когда переходишь на сайт он начинает грузиться и в это время мы ничего не видим кроме белого экрана. Конечно с сайтами которые грузятся быстро таких проблем не возникает, но когда он загружается долго это очень сильно раздражает и хочется быстрее этот сайт покинуть.

Но есть сайты в которых присутствуют красивые прелоадеры, которые показываются до тех пор пока сайт не загрузится.

Сам по себе прелоадер несет в себе две функции. Первая не совсем важная - это красивый анимирующийся элемент, на который приятно смотреть. Вторая функция является важной - это сигнал посетителю о том что сайт работает. В результате человек который зашел на сайт понимает, что сайт скоро загрузится и не закрывает его.

2. Пишем разметку прелоадера в html

Что ж, мы разобрались с тем для чего на сайте нужен прелоадер, а теперь давайте приступим к его созданию.

И первое что мы с вами сделаем так это напишем разметку для нашего будущего прелоадера в файле index.html. Она будет выглядеть вот так:

<div class="preloader">
    <div class="preloader__wrapp">
       <div class="preloader__one one"></div>
       <div class="preloader__one two"></div>
       <div class="preloader__one three"></div>
       <div class="preloader__one four"></div>
       <div class="preloader__two five"></div>
       <div class="preloader__two six"></div>
       <div class="preloader__two seven"></div>
       <div class="preloader__two eight"></div>
    </div>
</div>

Теперь разберем какие функции несут в себе заданные классы:

• class=”preloader” будет служить фоном для прелоадера, он будет растянут на всю ширину и высоту окна браузера;
• class=”preloader__wrapp” этот класс непосредственно и будет нашим прелоадером, также он будет служить оберткой для наших анимирующих элементов;
• class=”preloader__one” и class=”preloader__two” нужны для того что бы правильно расположить сами анимирующие элементы внутри нашей обертки;
• class=”one - eight” будут служить для правильного размещения отдельного анимирующего элемента.

3. Пишем стили для прелоадера в файле style.css

И так, с разметкой мы уже определились. Теперь приступаем к самому интересному, начинаем писать стили для нашего прелоадера. Открываем файл style.css (у вас он может быть назван по другому) и начинаем. Первым делом мы уберем стандартные отступы браузера записав такие строчки кода:

body{
    margin: 0;
    padding: 0;
}

Далее запишем стили для нашего фона на котором будет располагаться прелоадер:

.preloader{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: rgb(73,74,74);
    background: -moz-linear-gradient(45deg, rgba(73,74,74,1) 0%, rgba(47,47,47,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(73,74,74,1) 0%, rgba(47,47,47,1) 100%);
    background: linear-gradient(45deg, rgba(73,74,74,1) 0%, rgba(47,47,47,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#494a4a",endColorstr="#2f2f2f",GradientType=1);
    overflow: hidden;
}

Здесь мы указываем display:flex; justify-content:center; align-items:center; для центрирования прелоадера. Ну, а дальше я думаю и так все понятно. Теперь нужно задать стили для нашей обертки:

.preloader__wrapp{
    position: relative;
    width: 400px;
    height: 400px;
}

Поскольку внутренние элементы у нас будут позиционироваться абсолютно и относительно обертки, то ей мы задаем position:relative;

Пришло время задать общие стили для классов class=”preloader__one” и class=”preloader__two”:

.preloader__one,
.preloader__two{
    position: absolute;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

В этих классах будет два отличия. Первое отличие - это вариант анимации. Второе - это все элементы которые имеют class=”preloader__two” нужно будет повернуть на 45 градусов:

.preloader__two{
    transform: rotate(45deg);
}

Теперь зададим стили нашим анимирующим элементам:

.one,
.five{
    border-top: 3px solid #80bd01;
}
.two,
.sixt{
    border-right: 3px solid #80bd01;
}
.three,
.seven{
    border-bottom: 3px solid #80bd01;
}
.four,
.eight{
    border-left: 3px solid #80bd01;
}

Так как стили у классов .one и .five; .two и .six; .three и .seven; .four и .eight; одинаковые, то мы запишем их вместе. В дельнейшем это позволит быстрее изменять цвет прелоадера.

В итоге если все вышесказанное было сделано правильно, должен получится вот такой круг:

Для удобства на время скроем элементы с классом .preloader__two. Теперь, нам нужно, каждый из элементов который мы видим расположить вверху, внизу, слева и справа. Для этого добавим следующий код который поможет нам это сделать:

.one{
    top: -200px;
}
.two{
    right: -200px;
}
.three{
    bottom: -200px;
}
.four{
    left: -200px;
}

Должно получится так:

Теперь показываем скрытые элементы с классом .preloader__two и добавляем следующий код:

.five{
    right: -141px;
    bottom: 141px;
}
.sixt{
    left: 141px;
    top: 141px;
}
.seven{
    left: -141px;
    top: 141px;
}
.eight{
    right: 141px;
    top: -141px;
}

После вставки этого кода должна получится вот такая картина:

С позиционированием элементов разобрались. Теперь нам нужно для них добавить анимацию, что бы они начали вращаться.

Для этого нам понадобиться две функции для создания анимации. Первая будет анимировать элементы с классом .preloader__one, а вторая будет анимировать элементы с классом .preloader__two. Зачем нужно именно две функции вы поймете дальше.

Запишем функцию для анимации элементов с классом .preloader__one, она будет называться spin1:

@keyframes spin1 {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

В поле from нужно записать позицию с которой будет начинаться анимация. Так как всем элементам с классом .preloader__one мы не задавали никаких трансформаций(поворотов) соответственно transform: rotate у них равняется 0, то и начальную точку в поле from мы должны указать тоже 0 (transform: rotate(0deg)).

В поле to мы должны указать на сколько градусов должны повернуться наши элементы. Поскольку элементы должны сделать полный круг, то мы указываем 360deg(transform: rotate(360deg)).

Теперь запишем функцию для анимации элементов с классом .preloader__two, она будет называться spin2:

@keyframes spin2 {
    from {transform: rotate(45deg);}
    to {transform: rotate(405deg);}
}

Поскольку все элементы с классом .preloader__two мы повернули на 45deg, соответственно начальная позиция с которой будет начинаться анимация тоже изменилась на 45deg. Поэтому в поле from нужно записать transform:rotate(45deg). Если начальной точкой старта сделать нулевую позицию, то анимация будет дергаться и выглядеть это будет некрасиво.

Логично, что после изменения начальной позиции анимации, изменилась и длинна полного оборота элемента вокруг своей оси на +45deg. Поэтому, в поле to, мы запишем 360deg+45deg=405deg, должна получится вот такая запись transform: rotate(405deg);.

Функции для анимации элементов готовы, теперь их нужно добавить:

.preloader__one{
    animation: spin1 2.3s infinite linear;
    -webkit-animation: spin1 2.3s infinite linear;
}
.preloader__two{
    transform: rotate(45deg);
    animation: spin2 2.3s infinite linear;
    -webkit-animation: spin2 2.3s infinite linear;
}

Записываем функции с помощью специального свойства animation. В качестве значений указываем название самой функции (spin1,spin2), длительность анимации (2.3s), зацикливаем анимацию что бы она длилась бесконечно (infinite) и указываем значение (linear) которое делает анимацию равномерной и неизменной на протяжении всего времени.

Дополнительно можно сделать мерцание, которое добавит еще большего эффекта:

@keyframes spin1 {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}

    20%{opacity: 0.5;}
    50%{opacity: 0.2;}
    100%{opacity: 1;}
    50%{opacity: 0.2;}
    20%{opacity: 0.5;}
}
@keyframes spin2 {
    from {transform: rotate(45deg);}
    to {transform: rotate(405deg);}

    20%{opacity: 0.5;}
    50%{opacity: 0.2;}
    100%{opacity: 1;}
    50%{opacity: 0.2;}
    20%{opacity: 0.5;}
}

Результат проделанной работы

В итоге должен получится вот такой код css:

body{
    margin: 0;
    padding: 0;
}

.preloader{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: rgb(73,74,74);
    background: -moz-linear-gradient(45deg, rgba(73,74,74,1) 0%, rgba(47,47,47,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(73,74,74,1) 0%, rgba(47,47,47,1) 100%);
    background: linear-gradient(45deg, rgba(73,74,74,1) 0%, rgba(47,47,47,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#494a4a",endColorstr="#2f2f2f",GradientType=1);
    overflow: hidden;
}
.preloader__wrapp{
    position: relative;
    width: 400px;
    height: 400px;
}

.preloader__one,
.preloader__two{
    position: absolute;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.preloader__one{
    animation: spin1 2.3s infinite linear;
    -webkit-animation: spin1 2.3s infinite linear;
}
.preloader__two{
    display: block;
    animation: spin2 2.3s infinite linear;
    -webkit-animation: spin2 2.3s infinite linear;
    transform: rotate(45deg);
}

.one,
.five{
    border-top: 3px solid #80bd01;
}
.two,
.sixt{
    border-right: 3px solid #80bd01;
}
.three,
.seven{
    border-bottom: 3px solid #80bd01;
}
.four,
.eight{
    border-left: 3px solid #80bd01;
}

.one{
    top: -200px;
}
.two{
    right: -200px;
}
.three{
    bottom: -200px;
}
.four{
    left: -200px;
}

.five{
    right: -141px;
    bottom: 141px;
}
.sixt{
    left: 141px;
    top: 141px;
}
.seven{
    left: -141px;
    top: 141px;
}
.eight{
    right: 141px;
    top: -141px;
}

@keyframes spin1 {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}

    20%{opacity: 0.5;}
    50%{opacity: 0.2;}
    100%{opacity: 1;}
    50%{opacity: 0.2;}
    20%{opacity: 0.5;}
}
@keyframes spin2 {
    from {transform: rotate(45deg);}
    to {transform: rotate(405deg);}

    20%{opacity: 0.5;}
    50%{opacity: 0.2;}
    100%{opacity: 1;}
    50%{opacity: 0.2;}
    20%{opacity: 0.5;}
}

Если все было сделано правильно, то должен получится вот такой красивый и эффектный прелоадер:

  See the Pen 
  Preloader on html5 and css3 by DmitrN (@DmitrN)
  on CodePen.

Просмотреть реализацию в YouTube

На самом деле, это не все что можно сделать с этим прелоадером. Вы можете сами поэкспериментировать с разными его настройками. Можно увеличить либо уменьшить скорость анимации, можно поиграться с отступами и многим другим.

На этом пожалуй все. Если вам понравилась данная статья, вы можете подписаться на новости блога что бы не пропускать новые, еще более интересные статьи!

Также подписывайтесь на мой instagram и telegram, там вы сможете найти много полезной информации, а также познакомится с людьми которые только начинают или уже начали свой путь верстальщика.

Не забывайте оставлять свои комментарии, а также если у вас есть интересная тема для следующей статьи, то вы можете написать ее в комментариях и я постараюсь ее для вас сделать. Всем спасибо за внимание и пусть баги будут фичами!