Як зробити прелоадер на чистому css3.

Всім привіт! Сьогодні ми розглянемо, як зробити прелоадер на чистому CSS3.

Раніше, щоб виконати таке завдання, нам довелося б використовувати jаvascript, однак тепер ми можемо робити все на чистому CSS3. І, як це зробити, ми і розглянемо в цій статті.

Для початку створимо розмітку

class="Pre-loader"gt; 
class="Box1"gt; 
class="Box2"gt; 
class="Box3"gt; 
class="Box4"gt; 
class="Box5"gt;

Як бачите, розмітка досить проста. Все укладено в стилях

Пропишемо базові стилі для всіх блоків

.pre-loader { 
 margin:200pxauto- 
 width:66px- 
 height:50px- 
} 
 
.pre-loader gt; div { 
 background-color:# 34495e- 
 height:100% - 
 width:10px- 
 display:inline-block- 
}

створимо анімацію

Відео: SVG preloader - анімація предзагрузкі сайту

@keyframes myMove { 
0%{top:0px-} 
25%{top:200px-} 
50%{top:100px-} 
75%{top:200px-} 
100%{top:0px-} 
}

І ще кілька анімацій

Відео: How to Add CSS3 Preloader using jаvascript into Webapge | Youtube CSS3 & JS Preloader Tutorial 2016

@ -webkit-keyframes heightChange { 
0%,40%,100%{-webkit-transform: scaleY(0.4)} 
20%{-webkit-transform: scaleY(1.0)} 
} 
 
@keyframes heightChange { 
0%,40%,100%{ transform: scaleY(0.4) -} 
20%{ transform: scaleY(1.0) -} 
}

Запишемо анімацію блокам

.pre-loader gt; div { 
 background-color:# fff- 
 height:100% - 
 width:10px- 
 display:inline-block- 
-webkit-animation: heightChange 1s infinite ease-in-out- 
 animation: heightChange 1s infinite ease-in-out- 
}

І все, що залишилося зробити, це додати затримку анімації кожному блоку, щоб вони анімовані по черзі.

.pre-loader .box2 { 
-webkit-animation-delay:-0.9s- 
 animation-delay:-0.9s- 
} 
 
.pre-loader .box3 { 
-webkit-animation-delay:-0.8s- 
 animation-delay:-0.8s- 
} 
 
.pre-loader .box4 { 
-webkit-animation-delay:-0.7s- 
 animation-delay:-0.7s- 
} 
 
.pre-loader .box5 { 
-webkit-animation-delay:-0.6s- 
 animation-delay:-0.6s- 
}