Создаем загрузочные анимированные спиннеры в CSS3

Снипперы

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

Раньше, для анимации спиннеров нам необходим был Javascript, теперь все это можно сделать при помощи одного CSS. В этом уроке мы создадим 8 различных загрузочных спиннеров, используя только один CSS. А как же различные анимированные gif, спросите вы?! Безусловно, уже готовые гифки – это быстрое решение, но если вам нужен уникальный спиннер, да к тому же размером 600px, к примеру – такой вы вряд ли найдете онлайн ;)

Loading Bars

Это наиболее распространенный вид загрузки, который можно увидеть. Спиннер состоит из 8 линий, которые вместе вращаются по кругу. У каждой из линий будет разная непрозрачность (opacity). Эффект спиннинга получится от изменения непрозрачности каждой из подгружаемых полосок, создавая иллюзию того, что они крутятся.

HTML

Сначала мы создадим HTML для спиннера, все что нам нужно сделать, это создать родительский элемент с 8-ью дочерними.

<div class="loading bar">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

CSS

CSS начинается с создания внешнего вида спиннера, это означает, что мы должны стилизовать родительский элемент так, чтобы оставалось достаточно места для всех дочерних полосок. Каждый из дочерних элементов будет оформлен в стиле полосок, но с разной прозрачностью. Чтобы выбрать, какой элемент стилизовать, мы используем nth-child.

Мы начнем со стилизации родительского элемента, который будет квадратом 100px на 100px.

.loading{
	width:100px;
	height:100px;
	margin:30px auto;
	position:relative;
}

Далее, мы стилизуем каждую из полосок, для этого мы просто создаем линии шириной 10px и высотой 30px, затем устанавливаем цвет фона на черный, а еще именно здесь устанавливается CSS анимация.

.loading.bar div{
	width: 10px;
	height: 30px;
	background: black;
	position: absolute;
	top: 35px;
	left: 45px;
	opacity:0.05;

	-webkit-animation: fadeit 1.1s linear infinite;
	animation: fadeit 1.1s linear infinite;
}

После того, как полоски были оформлены, мы можем разместить их по кругу с помощью transform rotate и translate функций. Это делается с помощью nth-child, который берет каждую полоску и устанавливает ее отдельно.

.loading.bar div:nth-child(1){
	-webkit-transform: rotate(0deg) translate(0, -30px);
	transform: rotate(0deg) translate(0, -30px);

	-webkit-animation-delay:0.39s;
	animation-delay:0.39s;
}
.loading.bar div:nth-child(2){
	-webkit-transform: rotate(45deg) translate(0, -30px);
	transform: rotate(45deg) translate(0, -30px);

	-webkit-animation-delay:0.52s;
	animation-delay:0.52s;
}
.loading.bar div:nth-child(3){
	-webkit-transform: rotate(90deg) translate(0, -30px);
	transform: rotate(90deg) translate(0, -30px);

	-webkit-animation-delay:0.65s;
	animation-delay:0.65s;
}
.loading.bar div:nth-child(4){
	-webkit-transform: rotate(135deg) translate(0, -30px);
	transform: rotate(135deg) translate(0, -30px);

	-webkit-animation-delay:0.78s;
	animation-delay:0.78s;
}
.loading.bar div:nth-child(5){
	-webkit-transform: rotate(180deg) translate(0, -30px);
	transform: rotate(180deg) translate(0, -30px);

	-webkit-animation-delay:0.91s;
	animation-delay:0.91s;
}
.loading.bar div:nth-child(6){
	-webkit-transform: rotate(225deg) translate(0, -30px);
	transform: rotate(225deg) translate(0, -30px);

	-webkit-animation-delay:1.04s;
	animation-delay:1.04s;
}
.loading.bar div:nth-child(7){
	-webkit-transform: rotate(270deg) translate(0, -30px);
	transform: rotate(270deg) translate(0, -30px);

	-webkit-animation-delay:1.17s;
	animation-delay:1.17s;
}
.loading.bar div:nth-child(8){
	-webkit-transform: rotate(315deg) translate(0, -30px);
	transform: rotate(315deg) translate(0, -30px);

	-webkit-animation-delay:1.3s;
	animation-delay:1.3s;
}

Анимация для этих полосок называется “fadeit”, она просто меняет непрозрачность от полной к пустой.

@-webkit-keyframes fadeit{
	0%{ opacity:1; }
	100%{ opacity:0;}
}
@keyframes fadeit{
	0%{ opacity:1; }
	100%{ opacity:0;}
}

Bar Spinner

Bar spinner очень похож на loading спиннер, разница только в том, что вместо того, чтобы изменить прозрачность каждой из полосок, мы будем вращять весь родительский элемент, чтобы можно было увидеть разницу между первыми двумя спиннерами.

Бар сниппер

HTML

HTML для этого спиннера точно такой же, как и для первого, – родительский элемент с восемью дочерними элементами.

<div class="spinner bar">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

CSS

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

.spinner{
	width:100px;
	height:100px;
	margin:30px auto;
	position:relative;
  	-webkit-animation: rotateit 1.3s linear infinite;
  	animation: rotateit 1.3s linear infinite;
}

Обратите внимание – анимация этого элемента установлена на “rotateit”. Эта анимация будет использоваться для того, чтобы повернуть элемент на 360 градусов.

@-webkit-keyframes rotateit {
  from { -webkit-transform: rotate(360deg); }
  to { -webkit-transform: rotate(0deg);	}
}
@keyframes rotateit {
  from { transform: rotate(360deg);	}
  to { transform: rotate(0deg); }
}

Это позволит нам убедиться, что родительский элемент вращается на 360 градусов. Теперь можно перейти к стилизации полосок внутри родительского элемента.

.spinner.bar div{
	width: 10px;
	height: 30px;
	background: black;
	position: absolute;
	top: 35px;
	left: 45px;
}
.spinner.bar div:nth-child(1){
	-webkit-transform: rotate(0deg) translate(0, -30px);
	transform: rotate(0deg) translate(0, -30px);
}
.spinner.bar div:nth-child(2){
	-webkit-transform: rotate(45deg) translate(0, -30px);
	transform: rotate(45deg) translate(0, -30px);
	opacity:0.7;
}
.spinner.bar div:nth-child(3){
	-webkit-transform: rotate(90deg) translate(0, -30px);
	transform: rotate(90deg) translate(0, -30px);
	opacity:0.6;
}
.spinner.bar div:nth-child(4){
	-webkit-transform: rotate(135deg) translate(0, -30px);
	transform: rotate(135deg) translate(0, -30px);
	opacity:0.5;
}
.spinner.bar div:nth-child(5){
	-webkit-transform: rotate(180deg) translate(0, -30px);
	transform: rotate(180deg) translate(0, -30px);
	opacity:0.4;
}
.spinner.bar div:nth-child(6){
	-webkit-transform: rotate(225deg) translate(0, -30px);
	transform: rotate(225deg) translate(0, -30px);
	opacity:0.3;
}
.spinner.bar div:nth-child(7){
	-webkit-transform: rotate(270deg) translate(0, -30px);
	transform: rotate(270deg) translate(0, -30px);
	opacity:0.2;
}
.spinner.bar div:nth-child(8){
	-webkit-transform: rotate(315deg) translate(0, -30px);
	transform: rotate(315deg) translate(0, -30px);
	opacity:0.1;
}

Circle Spinner

Circle spinner похож на bar spinner за исключением того, что здесь используются кружочки вместо полосок. Это легко сделать с помощью CSS свойства border-radius и применив значение 50%, чтобы сделать элементы закруглеными.

Circle spinner

HTML

<div class="spinner circles">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

CSS

Родительский элемент кругового спиннера будет оформлен таким же образом, как и bar spinner.

.spinner{
	width:100px;
	height:100px;
	margin:30px auto;
	position:relative;
  	-webkit-animation: rotateit 1.3s linear infinite;
  	animation: rotateit 1.3s linear infinite;
}
@-webkit-keyframes rotateit {
  from { -webkit-transform: rotate(360deg); }
  to { -webkit-transform: rotate(0deg);	}
}
@keyframes rotateit {
  from { transform: rotate(360deg);	}
  to { transform: rotate(0deg); }
}

Разница между bar spinner и circle spinner в том, как мы стилизуем дочерние элементы, где все кружки одинакового размера.

.spinner.circles div{
	width: 20px;
	height: 20px;
	border-radius:50%;
	background: black;
	position: absolute;
	top: 35px;
	left: 45px;
}

Следующие стили для кружков будут точно такими же, как полоски спиннера, кроме масштаба круга. Используя свойство transform scale, мы сможем изменить размер кругов, чтобы сделать их меньше вокруг спиннера.

.spinner.circles div:nth-child(1){
	-webkit-transform: rotate(0deg) translate(0, -35px) scale(1.4);
	transform: rotate(0deg) translate(0, -35px) scale(1.4);
}
.spinner.circles div:nth-child(2){
	-webkit-transform: rotate(45deg) translate(0, -35px) scale(1.2);
	transform: rotate(45deg) translate(0, -35px) scale(1.2);
	opacity:0.7;
}
.spinner.circles div:nth-child(3){
	-webkit-transform: rotate(90deg) translate(0, -35px) scale(1.1);
	transform: rotate(90deg) translate(0, -35px) scale(1.1);
	opacity:0.6;
}
.spinner.circles div:nth-child(4){
	-webkit-transform: rotate(135deg) translate(0, -35px) scale(0.9);
	transform: rotate(135deg) translate(0, -35px) scale(0.9);
	opacity:0.5;
}
.spinner.circles div:nth-child(5){
	-webkit-transform: rotate(180deg) translate(0, -35px) scale(0.7);
	transform: rotate(180deg) translate(0, -35px) scale(0.7);
	opacity:0.4;
}
.spinner.circles div:nth-child(6){
	-webkit-transform: rotate(225deg) translate(0, -35px) scale(0.5);
	transform: rotate(225deg) translate(0, -35px) scale(0.5);
	opacity:0.3;
}
.spinner.circles div:nth-child(7){
	-webkit-transform: rotate(270deg) translate(0, -35px) scale(0.3);
	transform: rotate(270deg) translate(0, -35px) scale(0.3);
	opacity:0.2;
}
.spinner.circles div:nth-child(8){
	-webkit-transform: rotate(315deg) translate(0, -35px) scale(0.1);
	transform: rotate(315deg) translate(0, -35px) scale(0.1);
	opacity:0.1;
}

Facebook Loader

Если вы являетесь пользователем Фейсбука, то тогда вы знакомы с Facebook Loader, который состоит из 3 полосок, растущих слева направо.

FB loader

HTML

HTML для Facebook Loader очень прост, у него есть родительский элемент с 3-мя элементами внутри. Дочерние элементы будут использоваться в качестве 3 полосок, которые будут расти как часть анимации.

<div class="facebook">
	<div></div>
	<div></div>
	<div></div>
</div>

CSS

В CSS мы просто стилизуем каждую из полосок точно также, как 3 синих полоски.

Для каждой из полосок мы добавим CSS анимацию, все, что она будет делать, так это масштабировать элемент и изменять непрозрачность полоски. Таким образом, полоски будут исчезать и расти одновременно.

.facebook div{
	height:50px;
	width:20px;
	display:inline-block;
	background-color: #56bbdb;
	border:1px solid #217c99;

	-webkit-animation:facebook_loader 1.3s linear infinite;
	animation:facebook_loader 1.3s linear infinite;

	-webkit-transform: scale(0.91);
	transform: scale(0.91);
}

Для каждой из полосок мы изменим animation delay (задержку анимации), чтобы она срабатывала в разное время, тем самым создавая эффект волны.

.facebook div:nth-child(1){
	-webkit-animation-delay:0.39s;
	animation-delay:0.39s;
}
.facebook div:nth-child(2){
	-webkit-animation-delay:0.52s;
	animation-delay:0.52s;
}
.facebook div:nth-child(3){
	-webkit-animation-delay:0.65s;
	animation-delay:0.65s;
}

Теперь мы можем создать CSS-анимацию. Все, что мы делаем, это изменяем масштаб и непрозрачность элемента.

@-webkit-keyframes facebook_loader{
	0%{
		-webkit-transform:scale(1.2);
		opacity:1
	}

	100%{
		-webkit-transform:scale(0.7);
		opacity:0.1
	}
}

@keyframes facebook_loader{
	0%{
		transform:scale(1.2);
		opacity:1
	}

	100%{
		transform:scale(0.7);
		opacity:0.1
	}
}

Spinning Square

Spinning Square анимация просто берет квадрат и поворачивает его вертикально, а затем горизонтально. Любимый спиннер нашей редакции из этой коллекции!

HTML

Так как это только один элемент, HTML будет состоять с одного div.

<div class="spinning-square"></div>

CSS

Сначала CSS используется для стилизации квадрата, затем добавляется анимация для его вращения.

Квадрат будет простым черным квадратом 60 х 60 пикселей, потом добавляется CSS анимация rotatesquare.

.spinning-square {
    width: 60px;
    height: 60px;
    background-color: #333;

    margin: 0 auto;
    -webkit-animation: rotatesquare 1.2s infinite ease-in-out;
    animation: rotatesquare 1.2s infinite ease-in-out;
}

CSS анимации rotatesquare берет функцию CSS perspective, чтобы изменить положение элемента из z-индекса, это позволит нам вертикально вращать элемент на Y-оси. Затем, мы можем использовать функцию rotateX, чтобы повернуть элемент на X-оси.

@-webkit-keyframes rotatesquare {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotatesquare {
  0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 
  50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 
  100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
}

Spinner Bounce Circle

Этот спиннер состоит из 2 кругов, которые отпрыгивают друг от друга.

Spinner Bounce Circle

HTML

HTML для этого спиннера состоит из родительского элемента с двумя дочерними внутри. Эти дочерние элементы будут использоваться для эффекта “отпрыгивания” кругов.

<div class="spinner-bounce-circle">
    <div></div>
    <div></div>
</div>

CSS

Родительский элемент будет оформлен в области, куда добавляются круги. Нам просто нужно добавить ширину и высоту.

.spinner-bounce-circle
{
    width: 60px;
    height: 60px;

    position: relative;
    margin: 0 auto;
}

Теперь мы можем стилизовать каждый из кругов, а это означает добавление размера 100% к элементу и border-radius 50%, что сделает элемент закругленным. Затем, мы можем добавить фоновый цвет к кругу с непрозрачностью 0,6.

Именно здесь мы добавляем CSS анимацию circlebounce, которая используется для изменения масштаба элемента из ничего до полного. Так как масштабирование элемента должно происходить в разное время, мы добавим анимационную задержку (animation delay)к первому элементу.

.spinner-bounce-circle div
{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #333;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: circlebounce 2.0s infinite ease-in-out;
    animation: circlebounce 2.0s infinite ease-in-out;
}

.spinner-bounce-circle div:nth-child(1) {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

CSS circlebounce анимация изменит масштаб элемента c 0 до полноразмерного.

@-webkit-keyframes circlebounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}

@keyframes circlebounce {
    0%, 100% { transform: scale(0.0); }
    50% { transform: scale(1.0); }
}

Wave Loader

Wave Loader очень похож на Facebook Loader, он берет несколько полосок и меняет масштаб элементов в строке, чтобы сделать эффект волны.

Wave Loader

HTML

HTML состоит из одного родительского элемента с пятью дочерними внутри него.

<div class="spinner-wave">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

.spinner-wave {
    margin: 0 auto;
    width: 100px;
    height: 50px;
    text-align: center;
}

Теперь мы можем стилизовать дочерние элементы, а ими будут 5 полосок с черным фоном и анимацией “волны” добавленной ко всем элементам. Так как нам нужно, чтобы эти элементы работали в разное время, мы зададим задержку элементов в разное время. Для этого нам понадобится селектор nth-child с анимационной задержкой.

.spinner-wave > div {
    background-color: #333;
    height: 100%;
    width: 6px;
    display: inline-block;

    -webkit-animation: wave 1.2s infinite ease-in-out;
    animation: wave 1.2s infinite ease-in-out;
}

.spinner-wave div:nth-child(2) {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner-wave div:nth-child(3) {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner-wave div:nth-child(4) {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner-wave div:nth-child(5) {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

Анимация “волны” будет похожа на анимацию “отпрыгивающих” кругов:

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

@keyframes wave {
    0%, 40%, 100% { transform: scaleY(0.4); }
    20% { transform: scaleY(1.0); }
}

Rotating Cubes

Вращающиеся кубы будут увеличиваться и уменьшаться в зависимости от положения кубов.

Rotating Cubes

HTML

HTML для кубов очень прост, нам нужен родительский элемент и два дочерних. Эти дочерние элементы будут использоваться для стилизации кубов спиннера.

<div class="spinner-cube">
    <div></div>
    <div></div>
</div>

CSS

Стилизация родительского элемента создаст область 60 х 60 пикселей для кубов.

.spinner-cube
{
    margin: 0 auto;
    width: 60px;
    height: 60px;
    position: relative;
}

Дочерние элементы должны быть оформлены одинаково, у них будет черный фон и ширина/высота 20 х 20 пикселей. Следующей будет CSS анимация cuberotate которая будет работать на обоих элементах. Нам нужно начинать анимацию кубов в разное время для того, чтобы создать эффект вращения вокруг друг друга.

.spinner-cube > div
{
    background-color: #333;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: cuberotate 1.8s infinite ease-in-out;
    animation: cuberotate 1.8s infinite ease-in-out;
}

.spinner-cube div:nth-child(2)
{
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

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

@-webkit-keyframes cuberotate {
    25% { -webkit-transform: translateX(22px) rotate(-90deg) scale(0.5) }
    50% { -webkit-transform: translateX(22px) translateY(22px) rotate(-180deg) }
    75% { -webkit-transform: translateX(0px) translateY(22px) rotate(-270deg) scale(0.5) }
    100% { -webkit-transform: rotate(-360deg) }
}

@keyframes cuberotate {
    25% { transform: translateX(42px) rotate(-90deg) scale(0.5); } 
    50% { transform: translateX(42px) translateY(42px) rotate(-179deg); } 
    50.1% { transform: translateX(42px) translateY(42px) rotate(-180deg); } 
    75% { transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 
    100% { transform: rotate(-360deg); }
}