.loading1 {

	width: 0;

	padding: 12px;

	background-image:

	radial-gradient(circle at 0% 0%, transparent 40%, rgb(0,255,0) 40%, rgb(0,255,0) 70%, transparent 70%),

	radial-gradient(circle at 100% 0%, transparent 40%, rgba(0,255,0,.2) 40%, rgba(0,255,0,.2) 70%, transparent 70%),

	radial-gradient(circle at 100% 100%, transparent 40%, rgba(0,255,0,.2) 40%, rgba(0,255,0,.2) 70%, transparent 70%),

	radial-gradient(circle at 0% 100%, transparent 40%, rgba(0,255,0,.2) 40%, rgba(0,255,0,.2) 70%, transparent 70%);

	background-repeat: no-repeat;

	background-size: 50% 50%;

	background-position: 100% 100%, 0 100%, 0 0, 100% 0;

	-webkit-animation: loading1 linear .7s infinite;

	animation: loading1 linear .7s infinite;

	}

	@-webkit-keyframes loading1 {

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

	}

	@keyframes loading1 {

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

	}

	

	
	
 

Или создать благодаря border и animation

	.loading2 {

	width: 15px;

	height: 15px;

	border: 5px solid #ccffcc;  /* полупрозрачный цвет ставить не стоит, появляются ненужные линии */

	border-top-color: rgb(0,255,0);

	border-radius: 100%;

	-webkit-animation: loading2 linear .7s infinite;

	animation: loading2 linear .7s infinite;

	}

	@-webkit-keyframes loading2 {

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

	}

	@keyframes loading2 {

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

	}

	

	
	
 

Теги: CSS, transparent 40%, rgba(0, 255, .2) 100% loading1