Animated HTML Progress Bar CSS

GeekThis remains completely ad-free with zero trackers for your convenience and privacy. If you would like to support the site, please consider giving a small contribution at Buy Me a Coffee.

In previous posts we talked about JSONp requests and doing drag and drop uploads. But with those tutorials, we didn’t look into making them look nice. Today we are going to create a simple all CSS animated progress bar.

The Resources

You will need a pattern image that is transparent or the same color as your loading bar. Below you can download the image I use for a lot of my loading bars since it’s transparent and just makes part of the background darker so it works on all colors.

The Code

Below is the HTML document we will be using. I am going to use an external CSS file called “style.css” and include it in the head of the HTML document.

<!doctype html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="style.css" />
		<title>Loading Bar</title>
	</head>
	<body>
		<div class="progressbar">
			<div class="frame">
				<div class="fill"></div>
			</div>
			<div class="percent">50%</div>
		</div>
	</body>
</html>

I added a few extra things such as a percent div that you can adjust with javascript when using this code. But for the style sheet, we need the following added to the document or to our style.css file.

.progressbar {
	overflow: auto;
}
.progressbar .frame {
	float: left;
	width: 400px;
	height: 15px;
	border: 1px solid #bbbbbb;
	padding: 1px;
	background-color: #ffffff;

}
.progressbar .frame .fill {
	background: #3297E7 url(progress.png) repeat top left;
	width: 50%; /* Change this if the progress changes */
	height: 100%;

	animation: progressbar 1s linear 0 infinite normal; /* Supported Browsers */
	-webkit-animation: progressbar 1s linear 0 infinite normal; /* Safari / Chrome */
	-moz-animation: progressbar 1s linear 0 infinite normal; /* FF */
	-o-animation: progressbar 1s linear 0 infinite normal; /* Opera */

	transition: width 0.5s linear;
	-webkit-transition: width 0.5s linear;
	-moz-transition: width 0.5s linear;
	-o-transition: width 0.5s linear;
}
.progressbar .percent {
	float: left;
	height: 19px; /* .frame height + border + padding */
	line-height: 19px;
	font-size: 12px;
	margin-left: 5px;
}
@keyframes progressbar {
	0% {background-position: 0px 0px;}
	100% {background-position: 25px 0px;}
}
@-webkit-keyframes progressbar {
	0% {background-position: 0px 0px;}
	100% {background-position: 25px 0px;}
}
@-o-keyframes progressbar {
	0% {background-position: 0px 0px;}
	100% {background-position: 25px 0px;}
}
@-moz-keyframes progressbar {
	0% {background-position: 0px 0px;}
	100% {background-position: 25px 0px;}
}

In the CSS there are a few things you should note or know if you want to make modifications. The first thing is, in all the keyframe elements, the background-position-x should be the width of your pattern. In the image I provided, the width is 25px. If the width is different from the image you will notice “glitches” in your animation.

I included multiple prefixes for the animation property. Most of these are not required but are still placed here just in case. I usually only keep the -webkit- prefix along with the normal keyframes block and properties.

The percent number in the HTML will not adjust automatically with the width of the progress bar. This you will have to update using JavaScript to set it’s new value whenever you advance the progress bar. To make the progress bar advance, change the .fill width to it’s new percent. The width of fill will animate by itself once the percent is changed for that css class.

Related Posts

Adding PHP to your HTML and CSS Blog

Learn how to create a simple PHP Blog in a matter of minutes.

Code Blog in HTML and CSS

Create a blog styled website using HTML and CSS.

Hugo Footnotes and Citations

Add footnotes, citations, and references to your Hugo posts with this simple technique. Give your articles more credibility and improve your posts by making them more informative.

Prevent Sending HTTP Referer Headers from Your Website

Learn how to prevent your site from sending HTTP referer headers to external websites that you link to with these three different methods.