Skip to Content
Create a PayTM Loading Animation Using HTML & CSS

Create a PayTM Loading Animation Using HTML & CSS

  • html
  • css
  • loader
  • animation
  • frontend
  • portfolio
1 min read Ritik Tiwari

Micro animations can make interfaces feel polished and engaging. In this tutorial, we’ll recreate a PayTM-style loading animation using only HTML and CSS.

This is a great project for beginners and also a neat UI animation to showcase in your frontend portfolio.

What We Are Building

We’ll create:

  • Animated circular dots
  • Scale pulse effect
  • Staggered animation delays
  • Dual-tone PayTM-inspired colors

Perfect for:

  • Loading screens
  • Buttons with loading states
  • App splash screens
  • Portfolio animation demos

HTML Code

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="style.css" />
		<title>Paytm Loading</title>
	</head>
	<body>
		<div class="wrap">
			<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
			<div class="four"></div>
			<div class="five"></div>
		</div>
	</body>
</html>

CSS Code

/* style.css */
body {
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrap {
	height: 150px;
	width: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.one,
.two,
.three,
.four,
.five {
	border-radius: 100%;
	margin: 1vw;
	animation: animate 1s infinite alternate;
}

@keyframes animate {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.2);
	}
}

.one {
	animation-delay: 0.2s;
	border: 10px solid #00f;
}
.two {
	animation-delay: 0.4s;
	border: 10px solid #00f;
}
.three {
	animation-delay: 0.6s;
	border: 10px solid #00f;
}
.four {
	animation-delay: 0.8s;
	border: 10px solid #0ff;
}
.five {
	animation-delay: 1s;
	border: 10px solid #0ff;
}

Video Tutorial

Edit on GitHub Report a mistake

Related Posts

Build a BMI Calculator Using HTML, CSS and JavaScript

Build a BMI Calculator Using HTML, CSS and JavaScript

Learn how to build a beginner-friendly BMI Calculator using HTML, CSS and vanilla JavaScript.

Jul 20211 min read
Build a Hex Color Generator Using HTML, CSS and JavaScript

Build a Hex Color Generator Using HTML, CSS and JavaScript

Learn how to create a simple hex color generator and live preview tool using vanilla HTML, CSS and JavaScript.

Jul 20211 min read
Build Animated Social Media Icons Using HTML and CSS

Build Animated Social Media Icons Using HTML and CSS

Learn how to create animated social media icons with hover effects using pure HTML and CSS.

Sep 20201 min read