<head>
  <link href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"
			integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
			type="text/javascript"
			crossorigin="anonymous"></script>
</head>
<body>
<div id="loader" class="loading">
					<div class="loading square">
						<h1>Loading</h1>
					</div>
					<div class="loading square"></div>
					<div class="loading square"></div>
					<div class="loading square"></div>
				</div>
				<button id="completeButton" onClick="completeLoading()">
					Finish Loading
				</button>
</body>
#loader {
	position: static;
	height: 500px;
	width: 500px;
	margin: 200px auto 0 auto;
	transform: translateX(25%);
}
#loader .square {
	position: absolute;
	opacity: 1;
	width: 50%;
	padding-top: 25%;
	padding-bottom: 25%;
	transform-origin: center;
	text-align: center;
	animation-fill-mode: forwards;
	transition-duration: 1s;
}
#loader .square * {
	position: absolute;
	width: 100%;
	margin: auto;
	text-align: center;
	transform: rotate(-90deg) translateX(10%);
	font-family: 'Comfortaa', cursive;
	font-size: 4vh;
	transition-duration: 1s all;
}
#loader .square:nth-child(1) {
	z-index: 4;	
}
#loader .square:nth-child(2) {
	z-index: 3;	
}
#loader .square:nth-child(3) {
	z-index: 2;	
}
#loader .square:nth-child(4) {
	z-index: 1;	
}
.loading.square {
	background-color: #ad82cf;
	animation-duration: 10s;
	animation-delay: 1s;
	animation-iteration-count: infinite;
}
.loading.square:nth-child(1) {
	top: 0;
	left: 0;
	animation-name: square1;
}
.loading.square:nth-child(2) {
	top: 0%;
	left: 0%;
	animation-name: square2;
}
.loading.square:nth-child(3) {
	top: 0%;
	left: 0;
	animation-name: square3;
}
.loading.square:nth-child(4) {
	top: 0%;
	left: 0%;
	animation-name: square4;
}
@keyframes square1 {
	0% {
		transform: translate(0, 0); 
	}
	5% {
		transform: rotate(45deg);
	}
	15% {
		transform: rotate(45deg) translate(99%, 0%);
	}
	25% {
		transform: rotate(45deg) translate(99%, 99%);
	}
	35% {
		transform: rotate(45deg) translate(0%, 99%);
	}
	45%, 75% {
		transform: rotate(45deg) translate(0, 0);
	}
	80% {
		transform: rotate(90deg);
		background-color: #ad82cf;
		border-radius: 0;
	}
	90% {
		transform: rotate(90deg) translateY(-50%);
		background-color: #84dba7;
		animation-timing-function: linear;
		border-radius: 30%;
	}
	96% {
		background-color: #ad82cf;
		transform: rotate(0) translateY(0);
		border-radius: 0;
  }
}
@keyframes square2 {
	0% {
		transform: translate(0, 0); 
	}
	5%, 15% {
		transform: rotate(45deg);
	}
	25% {
		transform: rotate(45deg) translate(99%, 0%);
	}
	35% {
		transform: rotate(45deg) translate(99%, 99%);
	}
	45% {
		transform: rotate(45deg) translate(0%, 99%);
	}
	55%, 75% {
		transform: rotate(45deg) translate(0, 0);
	}
	80% {
		transform: rotate(90deg);
		background-color: #ad82cf;
		border-radius: 0%;
	}
	90% {
		transform: rotate(90deg) translateX(-50%);
		background-color: #a0dafa;
		animation-timing-function: linear;
		border-radius: 30%;
	}
	96% {
		background-color: #ad82cf;
		transform: rotate(0) translateX(0);
		border-radius: 0%;
	}
}
@keyframes square3 {
	0% {
		transform: translate(0, 0); 
	}
	5%, 25% {
		transform: rotate(45deg);
	}
	35% {
		transform: rotate(45deg) translate(99%, 0%);
	}
	45% {
		transform: rotate(45deg) translate(99%, 99%);
	}
	55% {
		transform: rotate(45deg) translate(0%, 99%);
	}
	65%, 75% {
		transform: rotate(45deg) translate(0, 0);
	}
	80% {
		transform: rotate(90deg);
		background-color: #ad82cf;
		border-radius: 0;
	}
	90% {
		transform: rotate(90deg) translateY(50%);
		background-color: #e0bbfc;
		animation-timing-function: linear;
		border-radius: 30%;
	}
	96% {
		background-color: #ad82cf;
		transform: rotate(0) translateY(0);
		border-radius: 0;
	}
}
@keyframes square4 {
	0% {
		transform: translate(0, 0); 
	}
	5%, 35% {
		transform: rotate(45deg);
	}
	45% {
		transform: rotate(45deg) translate(99%, 0%);
	}
	55% {
		transform: rotate(45deg) translate(99%, 99%);
	}
	65% {
		transform: rotate(45deg) translate(0%, 99%);
	}
	75% {
		transform: rotate(45deg) translate(0, 0);
	}
	80% {
		transform: rotate(90deg);
		background-color: #ad82cf;
		border-radius: 0;
	}
	90% {
		transform: rotate(90deg) translateX(50%);
		background-color: #fbccff;
		animation-timing-function: linear;
		border-radius: 30%;
	}
	96% {
		background-color: #ad82cf;
		transform: rotate(0) translateX(0);
		border-radius: 0;
	}
}

.unloading.square{
	animation-play-state: paused !important;
	opacity: 0 !important;
	transition: 1s all !important;
	transition-delay: .5s !important;
}

.complete.square {
	opacity: 1;
	transition: 1s !important;
	animation-duration: 2s;
	animation-delay: .5s;
	animation-fill-mode: forwards;
	transform: translate(0,0);
	background-color: #65db80;
	/* animation-delay: 1s; */
}
.complete.square:nth-child(1) {
	animation-name: load-complete-1;
}
.complete.square:nth-child(2) {
	animation-name: load-complete-2;
}
.complete.square:nth-child(3) {
	animation-name: load-complete-3;
}
.complete.square:nth-child(4) {
	animation-name: load-complete-4;
}
@keyframes load-complete-1 {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(-170%, 0);
		
	}
	55% {
		transform: rotate(45deg) translate(-120%, 120%);
	}
	85% {
		transform: rotate(90deg) translate(0, 170%);
	}
	100% {
		transform: rotate(90deg) translate(30%, 170%);
	}
}
@keyframes load-complete-2 {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: rotate(0) translate(-57%, 0);
	}
	55% {
		transform: rotate(45deg) translate(-40.1%, 40.1%);
	}
	85% {
		transform: rotate(90deg) translate(0, 57%);
	}
	100% {
		transform: rotate(90deg) translate(30%, 57%);
	}
}
@keyframes load-complete-3 {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: rotate(0) translate(57%, 0);
	}
	55% {
		transform: rotate(45deg) translate(40.1%, -40.1%);
	}
	85% {
		transform: rotate(90deg) translate(0, -57%);
	}
	100% {
		transform: rotate(90deg) translate(30%, -57%);
	}
}
@keyframes load-complete-4 {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: rotate(0) translate(170%, 0);
	}
	55% {
		transform: rotate(45deg) translate(120%, -120%);
	}
	85% {
		transform: rotate(90deg) translate(0, -170%);
	}
	100% {
		transform: rotate(90deg) translate(30%, -170%);
	}
}
.reloading.square {
	animation-play-state: paused !important;
	opacity: 0 !important;
	transition: all 1s !important;
	transition-delay: .5s !important;
}
function completeLoading(){
	console.log("function is working");
	const loaderText = $("#loader .square h1");
	const loadingSquares = $("#loader .square");
	loadingSquares.each(function(index, square){
		if($(square).hasClass("complete")){
			$(square).addClass("reloading");
		}
		else{
			$(square).addClass("unloading");
		}
		window.setTimeout(() => {
			$(square).removeClass(["reloading", "unloading"])
			$(square).toggleClass(["loading", "complete"]);
		}, 1500);
	});
	if(loaderText.text() === "Loading"){
		$("#completeButton").text("Reload");
		loaderText.text("O:");
		window.setTimeout(() => {
			$("#loader .square:nth-child(1)").html("<h1>C   O</h1>");
			$("#loader .square:nth-child(2)").html("<h1>M   P</h1>");
			$("#loader .square:nth-child(3)").html("<h1>L   E</h1>");
			$("#loader .square:nth-child(4)").html("<h1>T   E</h1>");
		}, 1500);
	}
	else {
		$("#loader .square:nth-child(1)").html("22<h1>Here</h1>");
		$("#loader .square:nth-child(2)").html("<h1>we</h1>");
		$("#loader .square:nth-child(3)").html("<h1>go</h1>");
		$("#loader .square:nth-child(4)").html("<h1>again...</h1>");
		
		$('#completeButton').text("Finish Loading");
		window.setTimeout(() => {
			$("#loader .square:nth-child(1)").html("<h1>Loading</h1>");
			$("#loader .square:nth-child(2)").html("");
			$("#loader .square:nth-child(3)").html("");
			$("#loader .square:nth-child(4)").html("");
		}, 1500);
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.