Коллекция анимированных прелодеров
Прелодеры являются обычным явлением в современном веб-дизайне.Как пользователи мы ждём от веба быстроты - нам не нравится ждать. Прелодеры являются визуальной обратной связью с пользователем о том что сайт загружается, тем самым уменьшая шанс того что пользователь с медленным интернет-соединением покинет сайт так и не дождавшись его полной загрузки.
CSS3 - основа для создания прелодеров.
Прежде чем погрузиться в строительстве нашу коллекцию CSS3 предварительных погрузчиков, сначала я буду обсуждать некоторые из атрибутов CSS3, которые необходимы для создания этих типов погрузчиков.
Псевдо-элементы :before и :after
Псевдо-элементы в действительности очень полезны, псевдо-элементы по сути создают фальшивые элементы до или после элемента HTML о котором идет речь.
"Псевдо происходит от греческого pseudēs, слова которое означает "ложный"."
Это похоже на создание дополнительного элемента который на самом деле не существует, однако псевдо-элементы можно применить используя CSS. Эти псевдо-элементы не является необходимостью для создания CSS3 предварительные погрузчики но они пригодятся и позволяют использовать удобную минимальную разметку.
Псевдо-элементы могут быть оформлены точно так же, как и любой другой элемент HTML, с той лишь разницей, что вы должны указать свойства содержимого. Без указания этого псевдо-элемент не будет отображаться. content может содержать любой текст, который может быть полезен, если прелодер должен содержать такие слова, как "Загрузка" Однако, если вам не нужен текстовый контент, то вы можете просто оставить свойство content пустым.
CSS3 анимация.
"Основным компонентом CSS анимации является keyframes, правило CSS, где создается анимация. Продумайте keyframes как этапы вдоль временной шкалы. Внутри @ ключевых кадров, вы можете определить эти этапы, каждый из которых имеет различный стиль,время анимация, время через котрое начнётся анимация. "-. Введение в CSS анимацию, подробней о @keyframes вы можете узнать здесь
1. Аудио волна
Примечание: прежде чем мы перейдем в демо, стоит отметить, что префиксы не включены в этих фрагментах кода.
Html
<div id="preloader_1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS
Эффект достигается за счет анимации высоту каждого пролета от 5px до 30px. Пролет также движется вниз по оси Y по 15px, чтобы дать эффект, что он растет от центра.
#preloader_1{
position:relative;
}
#preloader_1 span{
display:block;
bottom:0px;
width: 9px;
height: 5px;
background:#9b59b6;
position:absolute;
animation: preloader_1 1.5s infinite ease-in-out;
}
#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;
}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
0% {height:5px;transform:translateY(0px);background:#9b59b6;}
25% {height:30px;transform:translateY(15px);background:#3498db;}
50% {height:5px;transform:translateY(0px);background:#9b59b6;}
100% {height:5px;transform:translateY(0px);background:#9b59b6;}
}
По умолчанию анимация на каждом промежутке происходит одновременно. Эффект волны создается путем добавления animation-delay в каждом пролете со смещением в 2 миллисекунды. Каждый span использует селектор nth-child().
2. Круги превращающиеся в квадраты.
Этот прелодер использует четыре квадрата, которые сдвигаются, поворачиваются, изменяют цвета и становятся кругами.
HTML
<div id="preloader_2">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS
Все четыре из них превращаются в круги, изменяя border-radius от 0px (квадрат) до 20px (круг).
#preloader_2{
position: relative;
left: 50%;
width: 40px;
height: 40px;
}
#preloader_2 span{
display:block;
bottom:0px;
width: 20px;
height: 20px;
background:#9b59b6;
position:absolute;
}
#preloader_2 span:nth-child(1){
animation: preloader_2_1 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(2){
left:20px;
animation: preloader_2_2 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(3){
top:0px;
animation: preloader_2_3 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(4){
top:0px;
left:20px;
animation: preloader_2_4 1.5s infinite ease-in-out;
}
@-keyframes preloader_2_1 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;}
50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes preloader_2_2 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes preloader_2_3 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes preloader_2_4 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;}
50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
Каждый элемент также вращается и перемещается вдоль оси Х и Y в направлении обратном текущему положению. Цвет каждого span также анимируется равномерно от одного цвета к другому.
3. Пересекающиеся фигуры
Этот прелодер является одним div который использует :before и :after псевдо-элементы о которых мы говорили раньше.
HTML
<div id="preloader_3"></div>
CSS
#preloader_3{
position:relative;
}
#preloader_3:before{
width:20px;
height:20px;
border-radius:20px;
background:blue;
content:'';
position:absolute;
background:#9b59b6;
animation: preloader_3_before 1.5s infinite ease-in-out;
}
#preloader_3:after{
width:20px;
height:20px;
border-radius:20px;
background:blue;
content:'';
position:absolute;
background:#2ecc71;
left:22px;
animation: preloader_3_after 1.5s infinite ease-in-out;
}
@keyframes preloader_3_before {
0% {transform: translateX(0px) rotate(0deg)}
50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
100% {transform: translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after {
0% {transform: translateX(0px)}
50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
100% {transform: translateX(0px)}
}
Одна анимация находится в #preloader_3:before, другая в #preloader_3:after. Каждая анимация меняет цвет на заданном времени. Как и в предыдущем прелодере каждый псевдо-элемент изменяет форму с круга до квадрата изменяя свойство border-radius.
4. "Змейка"
Эта анимация состоит из множестваspan оформленных как цветные круги.
HTML
Вот разметка, используется один div и 5 span (по количеству кругов). В этом примере мы снова используем псевдо-элементы :before и :after
<div id="preloader_4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS
Анимация создается путем преобразования Y положения (по вертикальной оси) каждой анимации по -10px и изменения цвета с синего на желтый. Для создания основного эффекта тени box-shadow добавляется в каждом span, который меняет размер тени от 0px до 20 пикселей.
#preloader_4{
position:relative;
}
#preloader_4 span{
position:absolute;
width:20px;
height:20px;
background:#3498db;
opacity:0.5;
border-radius:20px;
-animation: preloader_4 1s infinite ease-in-out;
}
#preloader_4 span:nth-child(2){
left:20px;
animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
left:40px;
animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
left:60px;
animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
left:80px;
animation-delay: .8s;
}
@keyframes preloader_4 {
0% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
50% {opacity: 1; transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
100% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
Также как в первом примере добавляя свойство animation-delay мы добиваемся эффекта змейки.
5. Вращающийся диск
HTML
Здесь мы используем один div и псевдо-класс :after чтобы добавить кругу вращающиюся рамку.
<div id="preloader5"></div>
CSS
Добавляем border сверху и снизу и задаём border-radius 50 пикселей. Анимация добавляется к главному div, изменяет его цвет и задаёт вращение при помощи transform:rotate. Элемент :after добавлен для того чтобы изменять цвет рамки.
#preloader5{
position:relative;
width:30px;
height:30px;
background:#3498db;
border-radius:50px;
animation: preloader_5 1.5s infinite linear;
}
#preloader5:after{
position:absolute;
width:50px;
height:50px;
border-top:10px solid #9b59b6;
border-bottom:10px solid #9b59b6;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-radius:50px;
content:'';
top:-20px;
left:-20px;
animation: preloader_5_after 1.5s infinite linear;
}
@keyframes preloader_5 {
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);background:#2ecc71;}
100% {transform: rotate(360deg);}
}
@keyframes preloader_5_after {
0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
Заключение
Большим преимуществом использования CSS3 вместо изображений является то что они являются масштабируемыми готовыми для использования на экранах с большим разрешением (Хотя имейте ввиду что не все браузеры поддерживают @keyframes, впрочем все новые браузеры научились распознавать этот элемент). Поняв как работают эти примеры вы сможете создавать собственную анимацию.