Color Dots Loader

Color Dots Loader.markdown

Color Dots Loader

Inspired by https://dribbble.com/shots/2028561-Meta

A Pen by Paweł Kuna on CodePen.

License.

index.html

<div class="dots">
      <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="12" />
				<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>

script.js

/**
CSS Only!
*/

style.css

$dot-color: #79C3CD;
$dot-size: 35px;
$circle-size: 70px;
$animation-time: 4s;

$color-yellow: #FBD301;
$color-red: #FF3270;
$color-blue: #208BF1;
$color-green: #AFE102;

$colors: ($color-red, $color-blue, $color-green, $color-yellow);

body {
	background: #ffffff;
}

.dots {
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	outline: 1px solid red;

	filter: url(#goo);
}

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

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


	@keyframes dot-move {
		0% {
			transform: translateY(0);
		}

		18%, 22% {
			transform: translateY(-($circle-size));
		}

		40%, 100% {
			transform: translateY(0);
		}
	}

	@keyframes dot-colors {
		@for $i from 0 to 4 {
			#{$i*25%} {
				background-color: nth($colors, ($i+3)%4+1);
			}
		}

		100% {
			background-color: nth($colors, 4);
		}
	}

	&:nth-child(5):before {
		z-index: 100;
		width: $dot-size * 1.3;
		height: $dot-size * 1.3;
		margin-left: -($dot-size * .65);
		margin-top: -($dot-size * .65);
		animation: dot-colors $animation-time ease infinite;
	}

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

			100% {
				transform: rotate(#{($i+1)*270deg + 0deg});
			}
		}

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

			&:before {
				background-color: nth($colors, $i+1);
				animation: dot-move $animation-time #{$i * $animation-time/4} ease infinite;
			}
		}
	}
}