﻿.spin-div {
	margin: 5px auto;
	height: 30px;
	width: 30px;
}

.spin-1 {
	position: absolute;
	background-image: url(/Plugins/SCEUtil/Spinner/spin1.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 30px;
	width: 30px;
}

.spin-2 {
	position: absolute;
	background-image: url(/Plugins/SCEUtil/Spinner/spin2.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 30px;
	width: 30px;
}

.spin-cw {
	animation: spin 1s linear infinite;
}

.spin-ccw {
	animation: spin 2s linear infinite reverse;
}

@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg); /* IE 9 */
		transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
	}

	100% {
		-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg); /* IE 9 */
		transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
	}
}
