CSS loader create using custom css

Learn how to create CSS loader using only custom css. very easy to use code. and all code is available and source code also available.

Very easy to use code every web designer can use this loader on your website. and you can also modify as you like.

If you want more custom css loader then follow loading.io website. and learn how to create CSS image hover effects shine effects.

HTML

<div class="loading">
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
</div>

CSS

body {
	margin: 0;
	padding: 0;
	background: #0984e3;
}
.loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 40px;
	display: flex;
	align-items: center;
}
.line {
	width: 5px;
	height: 40px;
	background: white;
	margin: 0 3px;
	border-radius: 10px;
	animation: loading 0.8s infinite;
}
.line:nth-child(2) {
	animation-delay: 0.1s;
}
.line:nth-child(3) {
	animation-delay: 0.2s;
}
.line:nth-child(4) {
	animation-delay: 0.3s;
}
.line:nth-child(5) {
	animation-delay: 0.4s;
}
.line:nth-child(6) {
	animation-delay: 0.5s;
}
.line:nth-child(7) {
	animation-delay: 0.6s;
}
.line:nth-child(8) {
	animation-delay: 0.7s;
}
@keyframes loading {
	0% {
		height: 0;
	}
	50% {
		height: 40px;
	}
	100% {
		height: 0;
	}
}

3 Comments

  1. Nice Work yeah……………

  2. […] Text Reveal Effect Create In Pure CSS. Previously I had shared CSS loader in Pure […]

Leave a Reply