<div class="dots">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
	</div>

	<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
		<defs>
			<filter id="goo">
				<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="7" />
				<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
				<feBlend in2="goo" in="SourceGraphic" result="mix" />
			</filter>
		</defs>
	</svg>
/*
Inspired by: https://dribbble.com/shots/2215917-Loader-v4
*/

$dot-color: #79C3CD;
$dot-size: 24px;
$circle-size: 50px;

$animation-time: 1.25s;

body {
	background: #F3F1EF;
}

.dots {
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;

	filter: url(#goo);
}

.dot {
	width: 0;
	height: 0;
	position: absolute;
	left: 0;
	top: 0;

	&:before {
		content: '';
		width: $dot-size;
		height: $dot-size;
		border-radius: 50%;
		background: $dot-color;
		position: absolute;
		left: 50%;
		top: -($circle-size);
		margin-left: -($dot-size/2);
		margin-top: -($dot-size/2);
	}

	@keyframes dot-scale {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(.7);
		}

		100% {
			transform: scale(1);
		}
	}

	@for $i from 0 to 10 {
		@keyframes dot-rotate-#{$i + 1} {
			0% {
				transform: rotate(0deg);
			}

			50% {
				transform: rotate($i * 36deg);
			}

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

		&:nth-child(#{$i + 1}) {
			animation: dot-rotate-#{$i + 1} $animation-time ease infinite;

			&:before {
				animation: dot-scale $animation-time linear infinite;
			}
		}
	}
}
View Compiled
/*
Only CSS!
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.