<ul class="c">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
$colors: 
	#489D8A
	#324650
	#D34B4C
	#E8A961;
$size: 2em; /*change this to resize*/

@function scale($i){
	@return 1em * $i;
}

.c{
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	width: 5em;
	width: scale(5);
	li{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		border-radius: 50%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		transform-origin: center center;
		animation: anim 1s ease-in-out infinite;
		will-change: transform, filter;
		&:nth-child(1){
			width: scale(1);
			height: scale(1);
			&:after{
				content:'';
				display: block;
				font-size: 25%;
				width: 1em;
				height: 1em;
				border-radius: 50%;
				box-shadow: 
					scale(1) 0 0 rgba(nth($colors, 1), .2),
					-(scale(1)) 0 0 rgba(nth($colors, 2), .2),
					0 scale(1) 0 rgba(nth($colors, 3), .2),
					0 (-(scale(1))) 0 rgba(nth($colors, 4), .2);
			}
		}
		&:nth-child(2){
			animation-delay: .1s;
			width: scale(2);
			height: scale(2);
			&:after{
				content:'';
				display: block;
				font-size: 50%;
				width: 1em;
				height: 1em;
				border-radius: 50%;
				box-shadow: 
					scale(1.5) 0 0 rgba(nth($colors, 1), .4),
					-(scale(1.5)) 0 0 rgba(nth($colors, 2), .4),
					0 scale(1.5) 0 rgba(nth($colors, 3), .4),
					0 (-(scale(1.5))) 0 rgba(nth($colors, 4), .4); 
			}
		}
		&:nth-child(3){
			animation-delay: .15s;
			width: scale(3);
			height: scale(3);
			&:after{
				content:'';
				display: block;
				font-size: 75%;
				width: 1em;
				height: 1em;
				border-radius: 50%;
				box-shadow: 
					scale(2) 0 0 rgba(nth($colors, 1), .6),
					-(scale(2)) 0 0 rgba(nth($colors, 2), .6),
					0 scale(2) 0 rgba(nth($colors, 3), .6),
					0 (-(scale(2))) 0 rgba(nth($colors, 4), .6);
			}
		}
		&:nth-child(4){
			animation-delay: .2s;
			width: scale(4);
			height: scale(4);
			&:after{
				content:'';
				display: block;
				font-size: 100%;
				width: 1em;
				height: 1em;
				border-radius: 50%;
				box-shadow: 
					scale(2.5) 0 0 rgba(nth($colors, 1), .8),
					-(scale(2.5)) 0 0 rgba(nth($colors, 2), .8),
					0 scale(2.5) 0 rgba(nth($colors, 3), .8),
					0 (-(scale(2.5))) 0 rgba(nth($colors, 4), .8);
			}
		}
		&:nth-child(5){
			animation-delay: .25s;
			width: scale(5);
			height: scale(5);
			&:after{
				content:'';
				display: block;
				font-size: 125%;
				width: 1em;
				height: 1em;
				border-radius: 50%;
				box-shadow: 
					scale(3) 0 0 nth($colors, 1),
					-(scale(3)) 0 0 nth($colors, 2),
					0 scale(3) 0 nth($colors, 3),
					0 (-(scale(3))) 0 nth($colors, 4);
			}
		}
	}
}
@keyframes anim {
	50%{
		filter: blur(2px);
	}
	90%, 100%{ 
		transform: rotate(1turn);
		filter: blur(0);
	}
}


html{ font-size: 10px; height: 100%;}
body{
	background: #fcfcfc;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: $size;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.