body
{
	margin: 0;
	padding: 0;
	background: url(bg.jpg);
	background-size: cover;
}
.center
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 250px;
	height: 250px;
	box-sizing: border-box;
}
.circle1
{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border-style: dashed;
	border-width: 5px;
	border-color: #e0e0e0 #cfcfcf #b5b5b5 #9c9c9c;
	box-sizing: border-box;
	animation: animateCircle1 5s linear infinite;
	
}

.circle2
{
	position: absolute;
	top: 16px;
	left: 16px;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	border-radius: 50%;
	border: 4px dashed #fff;
	animation: animateCircle2 10s linear infinite;
	
}

.circle3
{
	position: absolute;
	top: 31px;
	left: 31px;
	width: calc(100% - 70px);
	height: calc(100% - 70px);
	border-radius: 50%;
	border: 4px dashed #fff;
	animation: animateCircle2 15s linear infinite;
	
}

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

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

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