SAPID INFO

Красивая прелоад-анимация на css

<style>
.error_brief {
	display: block;
	font-size: 30px;
	font-weight: 700;
	margin-bottom: 15px;
	}
.cssload-loader {
	position: relative;
	left: calc(50% - 36px);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	perspective: 900px;
	}

.cssload-inner {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	}

.cssload-inner.cssload-one {
	position: absolute;
	left: 0%;
	top: 0%;
	animation: cssload-rotate-one 1.6s linear infinite;
	-o-animation: cssload-rotate-one 1.6s linear infinite;
	-ms-animation: cssload-rotate-one 1.6s linear infinite;
	-webkit-animation: cssload-rotate-one 1.6s linear infinite;
	-moz-animation: cssload-rotate-one 1.6s linear infinite;
	border-bottom: 3px solid rgb(34,99,156);
	}

.cssload-inner.cssload-two {
	position: absolute;
	right: 0%;
	top: 0%;
	animation: cssload-rotate-two 1.6s linear infinite;
	-o-animation: cssload-rotate-two 1.6s linear infinite;
	-ms-animation: cssload-rotate-two 1.6s linear infinite;
	-webkit-animation: cssload-rotate-two 1.6s linear infinite;
	-moz-animation: cssload-rotate-two 1.6s linear infinite;
	border-right: 3px solid rgb(34,99,156);
	}

.cssload-inner.cssload-three {
	position: absolute;
	right: 0%;
	bottom: 0%;
	animation: cssload-rotate-three 1.6s linear infinite;
	-o-animation: cssload-rotate-three 1.6s linear infinite;
	-ms-animation: cssload-rotate-three 1.6s linear infinite;
	-webkit-animation: cssload-rotate-three 1.6s linear infinite;
	-moz-animation: cssload-rotate-three 1.6s linear infinite;
	border-top: 3px solid rgb(34,99,156);
	}
@keyframes cssload-rotate-one {
	0% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
		}
	100% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
		}
	}

@-o-keyframes cssload-rotate-one {
	0% {
		-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
		}
	100% {
		-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
		}
	}

@-ms-keyframes cssload-rotate-one {
	0% {
		-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
		}
	100% {
		-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
		}
	}

@-webkit-keyframes cssload-rotate-one {
	0% {
		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
		}
	100% {
		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
		}
	}

@-moz-keyframes cssload-rotate-one {
	0% {
		-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
		}
	100% {
		-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
		}
	}

@keyframes cssload-rotate-two {
	0% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
		}
	100% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
		}
	}

@-o-keyframes cssload-rotate-two {
	0% {
		-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
		}
	100% {
		-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
		}
	}

@-ms-keyframes cssload-rotate-two {
	0% {
		-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
		}
	100% {
		-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
		}
	}

@-webkit-keyframes cssload-rotate-two {
	0% {
		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
		}
	100% {
		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
		}
	}

@-moz-keyframes cssload-rotate-two {
	0% {
		-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
		}
	100% {
		-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
		}
	}

@keyframes cssload-rotate-three {
	0% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
		}
	100% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
		}
	}

@-o-keyframes cssload-rotate-three {
	0% {
		-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
		}
	100% {
		-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
		}
	}

@-ms-keyframes cssload-rotate-three {
	0% {
		-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
		}
	100% {
		-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
		}
	}

@-webkit-keyframes cssload-rotate-three {
	0% {
		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
		}
	100% {
		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
		}
	}

@-moz-keyframes cssload-rotate-three {
	0% {
		-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
		}
	100% {
		-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
		}
	}
</style>

<div style="height: 100%; width: 100%;">
	<div style="margin-left: auto; margin-right: auto; width: 700px;">
		<div style="float:left; width: 140px;">
			<div class="cssload-loader">
				<div class="cssload-inner cssload-one"></div>
				<div class="cssload-inner cssload-two"></div>
				<div class="cssload-inner cssload-three"></div>
			</div>
		</div>
		<div style="float:left;">
			<span class="error_brief">Заголовок рядом с прелоадером</span>
			<span class="error_details">Подзаголовок с более мелким текстом</span>
		</div>
		<div style="clear:both; margin-bottom: 30px;"></div>
	</div>
</div>

 

Примеры выполнения кода:

Заголовок рядом с прелоадером Подзаголовок с более мелким текстом

Комментарии к статье
Добавьте свой комментарий - оставьте след в блоге!