How to Create Awesome Loader | Water Drop Effect Loader

In this Awesome CSS tutorial, I will teach you, How to Create an Awesome Animated Loader using HTML and CSS only.

How to Create Awesome Loader | Water Drop Effect Loader | Loading Animation with Water Effects

In this Awesome CSS tutorial, I will teach you, How to Create an Awesome Animated Loader using HTML and CSS only. How to Create Awesome Loading in Html and CSS | This Amazing Loader is with very awesome animation | This Loader tutorial is for professional web designers.

Water drop effect loader

HTML

                            
                                <!DOCTYPE html>
<html>

<head>
	<title>Water Drop Effect Loader</title>
</head>
<body>
	<div class="main">
		<span class="dot"></span>
		<div class="dots">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
</body>

</html>

CSS

                            
                                .main {
		position: absolute;
		top: 45%;
		left: 45%;
		width: 200px;
		height: 40px;
		margin: -20px 0 0 -71px;
		background: #fff;
		filter: contrast(20);
	}

	.main .dot {
		position: absolute;
		margin: 15px;
		width: 16px;
		height: 16px;
		background: #000;
		border-radius: 50%;
		filter: blur(4px);
		transform: translateX(0);
		animation: dot 3s infinite;
	}

	.main .dots {
		margin: 15px 0 0 31px;
		transform: translateX(0);
		animation: dots 3s infinite;
	}

	.main .dots span {
		display: block;
		float: left;
		width: 16px;
		height: 16px;
		margin-left: 16px;
		filter: blur(4px);
		background: #000;
		border-radius: 50%;
	}

	@keyframes dot {
		50% {
			transform: translateX(160px);
		}
	}

	@keyframes dots {
		50% {
			transform: translateX(-30px);
		}
	}

Conclusion

Download Code Files