How to Create Animated Square Loader in Html and CSS

In this web design tutorial I will Create a Animated Loader in Html and CSS in 2021

How to Create Animated Square Loader in Html and CSS | How to Design Animated Loader in Html & CSS

In this web design tutorial I will Create a Animated Loader in Html and CSS in 2021.How to Design Animated Loader in Html and CSS. Loading Animation in Html and CSS | Animated Loading Animation.

Square Loader in HTML & CSS

HTML

                            
                                <!DOCTYPE html>
<html>
<head>
	<title>Square Loader in Html & CSS</title>
</head>
<body>

	<div class="main">
		<div class="cube1 folding"></div>
		<div class="cube2 folding"></div>
		<div class="cube4 folding"></div>
		<div class="cube3 folding"></div>
	</div>

</body>
</html>

CSS

                            
                                body {
		margin: 0;
		padding: 0;
		background-color: indigo;
		justify-content: center;
		align-items: center;
		display: flex;
		min-height: 100vh;
	}

	.main {
		position: relative;
		width: 100px;
		height: 100px;
		transform: rotateZ(45deg);
	}

	.main .folding {
		position: relative;
		width: 50%;
		height: 50%;
		float: left;
		transform: scale(1.1);
	}

	.main .folding:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		animation: folding-angle 2.4s infinite linear both;
		transform-origin: 100% 100%;
	}

	.main .cube2 {
		transform: scale(1.1) rotateZ(90deg);
	}

	.main .cube3 {
		transform: scale(1.1) rotateZ(180deg);
	}

	.main .cube4 {
		transform: scale(1.1) rotateZ(270deg);
	}

	.main .cube2:before {
		animation-delay: 0.3s;
	}

	.main .cube3:before {
		animation-delay: 0.6s;
	}

	.main .cube4:before {
		animation-delay: 0.9s;
	}

	@keyframes folding-angle {

		0%,
		10% {
			transform: perspective(140px) rotateX(-180deg);
			opacity: 0;
		}

		25%,
		75% {
			transform: perspective(140px) rotateX(0deg);
			opacity: 1;
		}

		90%,
		100% {
			transform: perspective(140px) rotateY(180deg);
			opacity: 0;
		}
	}

Conclusion

Download Code Files