Loading effect

In this example below you will see how to do a Loading effect with some HTML / CSS and Javascript

Inspired by www.goodmoods.com

Thumbnail
This awesome code was written by thomasclausen, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright thomasclausen ©
  • HTML
  • CSS
  • JavaScript
    <svg id="loader" xmlns="https://www.w3.org/2000/svg" preserveAspectRatio="none" width="480" height="480" viewBox="0 0 480 480">
	<polygon fill="#D7A29A" points="480,60 240,240 0,300 0,0 480,0 "/>
	<polygon fill="#C8C46B" points="480,60 240,240 480,400 "/>
	<polygon fill="#B6CABF" points="480,480 0,480 0,300 240,240 480,400 "/>
	<path fill="#FFFFFF" d="M40,40 440,40 440,440 40,440 Z"/>
</svg>

<div class="site-content">
	<div class="content">
		<button class="expand" data-action="expand">Expand ?</button>
	</div>
</div>


/*Downloaded from https://www.codeseek.co/thomasclausen/loading-effect-mPbvGY */
    body {
	background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480"><polygon fill="#D7A29A" points="0,0 480,0 480,480 0,480 "/><polygon fill="#B6CABF" points="0,300 480,180 480,480 0,480 "/></svg>') no-repeat 50% 50%;
	background-size: cover;
}

#loader {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;

	&.color-scheme-1 {

		polygon {

			&:nth-child(1) {
				fill: #d7a29a;
			}
			&:nth-child(2) {
				fill: #b6cabf;
			}
			&:nth-child(3) {
				fill: #c8c46b;
			}
		}
	}
	&.color-scheme-2 {

		polygon {

			&:nth-child(1) {
				fill: #d9c6b0;
			}
			&:nth-child(2) {
				fill: #102040;
			}
			&:nth-child(3) {
				fill: #165953;
			}
		}
	}
	&.color-scheme-3 {

		polygon {

			&:nth-child(1) {
				fill: #a7b4a0;
			}
			&:nth-child(2) {
				fill: #df4336;
			}
			&:nth-child(3) {
				fill: #f2f2f2;
			}
		}
	}
	&.color-scheme-4 {

		polygon {

			&:nth-child(1) {
				fill: #f9e1ae;
			}
			&:nth-child(2) {
				fill: #891a1b;
			}
			&:nth-child(3) {
				fill: #acb8a6;
			}
		}
	}
}

.site-content {
	width: calc(100% - 4em);
	height: calc(100% - 4em);
	padding: 2em;
	background: #fff;
	margin: 2em;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	box-sizing: border-box;
}
.content {
	text-align: center;
	transition: opacity 0.3s, visibility 0s;
	
	.js-loading & {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.3s, visibility 0s 0.3s;
	}
}
.expand {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5em;
	color: #fff;
	text-transform: uppercase;
	padding: 0.5em 1em;
	background: #7a90ff;
	border: none;
	border-radius: 6px;
	display: inline-block;
}



/*Downloaded from https://www.codeseek.co/thomasclausen/loading-effect-mPbvGY */
    console.clear();

var loader = new Snap('#loader'),
	expandAnimation = [{
		animation: { d: 'M0,0 400,80 400,400 80,400 Z' },
		dur: 125
	}, {
		animation: { d: 'M0,0 480,0 400,400 80,400 Z' },
		dur: 50
	}, {
		animation: { d: 'M0,0 480,0 480,480 80,400 Z' },
		dur: 100
	}, {
		animation: { d: 'M0,0 480,0 480,480 0,480 Z' },
		dur: 75
	}],
	contractAnimation = [{
		animation: { d: 'M80,80 480,0 480,480 0,480 Z' },
		dur: 125
	}, {
		animation: { d: 'M80,80 400,80 480,480 0,480 Z' },
		dur: 50
	},{
		animation: { d: 'M80,80 400,80 400,400 0,480 Z' },
		dur: 100
	},{
		animation: { d: 'M80,80 400,80 400,400 80,400 Z' },
		dur: 75
	}],
	expandButtons = document.querySelectorAll('[data-action=expand]');

function animateSVG(element, frameArray, whichFrame, callback) {
	if (whichFrame >= frameArray.length) {
		if (callback && typeof callback === 'function') {
			callback();
		}
		return;
	}
	element.animate(frameArray[whichFrame].animation, frameArray[whichFrame].dur, mina.linear, animateSVG.bind(null, element, frameArray, whichFrame + 1, callback));
}

var expandButtonClick = function () {
	document.body.classList.add('js-loading');
	setTimeout(function () {
		animateSVG(loader.select('path'), expandAnimation, 0, function () {
			document.getElementById('loader').removeAttribute('class');
			document.getElementById('loader').classList.add('color-scheme-' + (Math.floor(Math.random() * 4) + 1));
			setTimeout(function () {
				animateSVG(loader.select('path'), contractAnimation, 0, function () {
					document.body.classList.remove('js-loading');
				});
			}, 1000);
		});
	}, 300);
};
for (var a = 0, al = expandButtons.length; a < al; a++) {
	expandButtons[a].addEventListener('click', expandButtonClick);
}


Comments