Loading animation

index.html

<div class="loader"></div>

loading-animation.markdown

Loading animation

A loading aniamtion based on https://virtual-gallery.okeystudio.com/

A Pen by Natalia 🤟 on CodePen.

License.

style.scss

$duration: 6s;
$ease: cubic-bezier(0.25, 1, 0.5, 1);

.loader {
	background: rgba(250, 177, 160, 0.65);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	&::before,
	&::after {
		content: "";
		display: block;
		width: 3.5rem;
		height: 3.5rem;
		top: 50%;
		left: 50%;
		position: absolute;
		border-radius: 50%;
		animation: dance infinite normal $duration $ease;
		background-size: 90% 90%;
		background-position: center;
		background-repeat: no-repeat;
	}

	&::before {
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 5 0 Q 5 5 10 5 Q 5 5 5 10 Q 5 5 0 5 Q 5 5 5 0 Z' fill='%23333'%3E%3C/path%3E%3C/svg%3E");
		animation-delay: -$duration * 0.25;
	}

	&::after {
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23333' fill='none' stroke-width='.3' stroke-linecap='round' d='M 4.25 5.5 Q 5 6.25 5.75 5.5' /%3E%3Cellipse class='' cx='3.25' cy='5' fill='%23333' stroke-width='0' rx='.4' ry='.4' /%3E%3Cellipse class='' cx='6.75' cy='5' fill='%23333' stroke-width='0' rx='.4' ry='.4' /%3E%3Cellipse class='' cx='5' cy='5' fill='none' stroke='%23333' stroke-width='0.3' rx='4' ry='4' /%3E%3C/svg%3E");
		animation-delay: $duration * 0.125;
	}
}

@keyframes dance {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}
	12.5%, 25% {
		transform: translate(-100%, 0) rotate(90deg);
	}
	37.5%, 50% {
		transform: translate(-100%, -100%) rotate(0deg);
	}
	62.5%, 75% {
		transform: translate(0, -100%) rotate(-90deg);
	}
	87.5%, 100% {
		transform: translate(0, 0) rotate(0deg);
	}
}