Индикатор загрузки на чистом CSS

HTML

<div class="loader"></div>

CSS

@-webkit-keyframes loader {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-moz-keyframes loader {
	100% {
		-moz-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes loader {
	100% {
		transform: rotate(360deg);
	}
}

.loader {
	width: 35px;
	height: 35px;
	border: 6px solid #000;
	border-left-color: #333;
	border-bottom-color: #555;
	border-right-color: transparent;
	border-radius: 100%;
	-webkit-animation: loader 0.5s infinite linear;
	-moz-animation: loader 0.5s infinite linear;
	animation: loader 0.5s infinite linear;
}

Демо

Смотреть результат

Теги: css, анимация

Редактировать