How to Make Deleting Feelings Progress Bar

In this tutorial, we will show you how to make Progress Bar of Deleting Feelings. You can see demo on click below button and also available code of this script.

Demo Download

Step to Make Deleting Feelings Progress Bar using CSS and Javascript

To make progress bar of deleting feelings we need to follow the below steps

  1. Index.html
  2. Css files
  3. Javascripts

1: Index.html

First of all we create a index.html file for write content, connect to style.css file in head section and following code paste in body section.

<body>
	<div class="deleting">Deleting Feelings</div>
	<div id="percentCount" class="percent-count"></div>
	<div class="progress-bar">
		<div class="progress" id="progress"></div>
	</div>
	<div class="overlay" id="overlay">
		<div class="span">
			<span>T</span>
			<span>-</span>
			<span>C</span>
			<span>O</span>
			<span>D</span>
			<span>E</span>
			<span>*</span>
			<span>S</span>
			<span>C</span>
			<span>R</span>
			<span>I</span>
			<span>P</span>
			<span>T</span>
		</div>
		<h1>Error!</h1>
		<h3>We can't delete it</h3>
	</div>

	<script src="script.js"></script>
	
</body>

As you see above code here we use multiple div to create heading, percentage bar, progress bar and overlay div with id tag.

2: css files

Now create a css file and connect in html.

*
{
	box-sizing: border-box;
}
body
{
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100vh;
	background: linear-gradient(to top right, #ff5050 0%, #ff99cc 100%);
}
.deleting
{
	width: 450px;
	height: 50px;
	margin: 50px auto;
	font-size: 50px;
	text-align: center;
	color: black;
	animation: deleting 0.2s 50 alternate;
}
@keyframes deleting
{
	0%{
		color: black;
	}
	100%{
		color: white;
	}
}
.percent-count
{
	width: 450px;
	height: 50px;
	margin: 50px auto;
	font-size: 50px;
	text-align: center;
	color: #ffffff;
}
.progress-bar
{
	width: 506px;
	height: 26px;
	background-color: #ffffff;
	border-radius: 13px;
	padding: 3px;
	margin: 50px auto;
}
.progress
{
	width: 25px;
	height: 20px;
	border-radius: 10px;
	background-color: dodgerblue;
}

.overlay
{
	visibility: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 400px;
	height: 200px;
	background: white;
	border-radius: 20px;
}
.overlay .span
{
	text-align: center;
	padding-top: 5px;
	font-size: 16px;
}
.overlay .span span
{
	border: 2px solid red;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 50%;
}

.overlay h1
{
	text-align: center;
	padding-top: 10px;
	font-size: 56px;
	animation: animate 0.4s infinite alternate;
}
@keyframes animate 
{
	0%{
		color: black;
	}
	100%{
		color: white;
	}
}
.overlay h3
{
	text-align: center;
	font-size: 22px;
	animation: animatee 20s;
}
@keyframes animatee 
{
	0%{
		color: white;
	}
	90%{
		color: white;
	}
	100%{
		color: black;
	}
}

In above code we create style code of classes, you can copy and paste code in css file.

3: Javascript

Now create a js file with name of script.js and paste following code in it.

function progress() {
	var prg = document.getElementById('progress');
	var percent = document.getElementById('percentCount');
	var counter = 5;
	var progress = 25;
	var id = setInterval(frame, 120);

	function frame() {
		if (progress == 500 && counter == 100) {
			clearInterval(id);
		} else if(progress == 400 && counter == 80) {
			clearInterval(id);
			function rainbow(){
				document.getElementById("overlay").style.visibility="visible";
			}
			setTimeout(rainbow, 3000);
		} else {
			progress += 5;
			counter += 1;
			prg.style.width = progress + 'px';
			percent.innerHTML = counter + '%';
		}
	}
}

progress();

We set time out element and progress bar process.

Conclusion

Today we learnt how to make deleting feelings progress bar using css3 and javascript, you can add multiple this type of progress bar in your website just by adding the HTML markup and csss code and javascript code.

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

Leave a Reply

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