How to make loading bar like TikTok

In this tutorial, i will learn How to Make Loading Bar Like TikTok. You can see demo on click below button and source code also available in free.

Demo Download

Step to make loading bar like TikTok

To make loading bar like TikTok we need to follow below all steps

  • Create HTML File
  • Create CSS File

1: Create HTML File

First of all we create a index.html file and write title & style link to connect css file in head section then paste below code in body section.

<body>
	<div class="circle">
		<div class="circle1"></div>
		<div class="circle2"></div>
	</div>
</body>

In above code, create a div tage with circle class and in which create more two div tage with class name circle1 and circle2.

2: Create CSS File

Secondly, we create a style.css file and create connection in head section of index.html.

*{
	margin: 0;
	padding: 0;
}
body{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.circle{
	width: 200px;
	height: 200px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.circle1{
	position: absolute;
	width: 50px;
	height: 50px;
	background: #ff4a5f;
	box-shadow: inset 0px 1px 1px #ff4a5f, 3px 3px 9px rgba(0,0,0,0.8);
	border-radius: 50%;
	animation: circleone 1s infinite;
}
@keyframes circleone {
	0%{
		transform: scale(1);
		left: 50%;
		z-index: 1;
	}
	25%{
		transform: scale(0.5);
		z-index: 1;
	}
	50%{
		transform: scale(1);
		left: 25%;
	}
	75%{
		transform: scale(1);
	}
	100%{
		transform: scale(1);
		left: 50%;
	}
}

.circle2{
	position: absolute;
	width: 50px;
	height: 50px;
	left: 50%;
	background: #33e4ff;
	box-shadow: inset 0px 1px 1px #33e4ff, 3px 3px 9px rgba(0,0,0,0.8);
	border-radius: 50%;
	animation: circletwo 1s infinite;
	animation-delay: .5s;
}
@keyframes circletwo {
	0%{
		transform: scale(1);
		left: 50%;
	}
	25%{
		transform: scale(0.5);
	}
	50%{
		transform: scale(1);
		left: 25%;
	}
	75%{
		transform: scale(1);
	}
	100%{
		transform: scale(1);
		left: 50%;
	}
}

In above code we create a style code of circle, circle1 and circle2.

Conclusion

Today we learnt how to make loading bar like TikTok. You can use this code on every page of your website.

If you found this tutorial helpful, share it with your friends and developers group.

Demo Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

Related Tags:

tik tok
tik tok app
tiktok video
tiktok app
tic toc app
tik tok website

Leave a Reply

Your email address will not be published. Required fields are marked *