Техно-мир

Иногда возникает необходимость сделать индикатор загрузки, это необходимо, чтобы подать пользователю всю информацию сразу, а не частично, пока страница загружается. Такой прием часто используется на «тяжелых» сайтах, уведомляя посетителя, что сайт загружается с помощью индикатора. В сегодняшнем уроке мы рассмотрим как создать один из таких индикаторов. Чтобы страницу не загружать еще больше, данный индикатор будет создан с помощью правил css3. Это позволит существенно сократить вес индикатора и увеличить скорость загрузки.Идея состоит в том, что у нас будут блоки, на которых будут нанесены буквы, данные блоки будут двигаться волной, и немного вращаясь, что позволит создавать эффект объемности.

Шаг 1. HTML

Разметка будет простой, у нас будет два класса «preloader» и «preloader-box» первый из который будет определять общие правила, а второй определяет полностью разметку.

З
А
Г
Р
У
З
К
А

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

Шаг 2. CSS

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

.preloader {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: -webkit-radial-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,0.8));
z-index: 10;

Затем определяем параметры для дочерних элементов, мы задаем соотношения сторон для каждого блока, кроме этого мы устанавливаем вариант трансформации, обратите внимание, что нам необходимо создать эффект волны, по этому количество времени мы будем устанавливать в возрастающем соотношении, кроме этого мы устанавливаем максимальный уровень отклонения по оси X и Y:

.preloader > .preloader-box {
position: absolute;
width: 345px;
height: 30px;
top: 50%;
left: 50%;
margin: -15px 0 0 -150px;
-webkit-perspective: 200px;
}
.preloader .preloader-box > div {
position: relative;
width: 30px;
height: 30px;
background: #CCC;
float: left;
text-align: center;
line-height: 30px;
font-family: Verdana;
font-size: 20px;
color: #FFF;
}
.preloader .preloader-box > div:nth-child(1) {
background: #3366FF;
margin-right: 15px;
-webkit-animation: movement 600ms ease 0ms infinite alternate;
}
.preloader .preloader-box > div:nth-child(2) {
background: #3366FF;
margin-right: 15px;
-webkit-animation: movement 600ms ease 75ms infinite alternate;
}
.preloader .preloader-box > div:nth-child(3) {
background: #3366FF;
margin-right: 15px;
-webkit-animation: movement 600ms ease 150ms infinite alternate;
}
.preloader .preloader-box > div:nth-child(4) {
background: #3366FF;
margin-right: 15px;
-webkit-animation: movement 600ms ease 225ms infinite alternate;
}
.preloader .preloader-box > div:nth-child(5) {
background: #3366FF;
margin-right: 15px;
-webkit-animation: movement 600ms ease 300ms infinite alternate;
}
.preloader .preloader-box > div:nth-child(6) {
background: #3366FF;
margin-right: 15px;
-webkit-animation: movement 600ms ease 375ms infinite alternate;
}
.preloader .preloader-box > div:nth-child(7) {
background: #3366FF;
margin-right: 15px;
-webkit-animation: movement 600ms ease 450ms infinite alternate;
}
.preloader .preloader-box > div:nth-child(8) {
background: #3366FF;
-webkit-animation: movement 600ms ease 525ms infinite alternate;
}
@-webkit-keyframes movement {
from {
-webkit-transform: scale(1.0) translateY(0px) rotateX(0deg);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
to {
-webkit-transform: scale(1.5) translateY(-25px) rotateX(45deg);
box-shadow: 0 25px 40px rgba(0,0,0,0.4);
background: #3399FF;
}
}

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