CSS Progress Bar with Gradient Background

It is always fun to play with web elements and Today we have build gradient progress bar with CSS. It looks fancy and no images. The gradient background makes it appealing.

This bar doesn’t have percentage indicator but I did make Progress Bar with Percentage which you can take a look for a demo.

The bars required when you are building a site which have a functionality of download file or file transfer. It is also a good idea to add it when building desktop or web application — at some point — you may need to this nice UI element.

How to Create a Gradient Progress Bar with CSS

Add the gradient.css in the document to start to implement it on your website.

<link rel="stylesheet" type="text/css" href="path/gradient.css" />

The markup is simple. Make a container and wrap two child divs. The one will be used for gradient color and the second one for shrinker.

<div id="progress-bar-container">
    <div class="progress-bar-child progress gradient-1"></div>
    <div class="progress-bar-child shrinker timelapse"></div>
</div>

• .progress-bar-container – defines setting heights and border-radius.
• .progress-bar-child – Need to add the width and height of 100%.
• .progress– defines the general styles for our progress bar.
• .gradient-1 – Define a unique gradient color.
• .shrinker– loading animation for the current progress bar.
• .timelapse– this will help fill the progress bar.

The CSS

Following styles require for the CSS3 progress bar and filled area.

#progress-bar-container {
	height: 60px;
	margin: 0 auto;
	position: relative;
	top: 50%;
	border-radius: 35px;
	overflow: hidden;
}
.progress-bar-child {
	width: 100%;
	height: 100%;
}
.progress {
	color: white;
	text-align: center;
	line-height: 75px;
	font-size: 35px;
	font-family: "Segoe UI";
	animation-direction: reverse;
	background: #e5405e;	
}

Now Let’s add some gradients:

.gradient-1{
	/* Old browsers */
	background: -moz-linear-gradient(left, #e5405e 0%, #ffdb3a 25%, #3fffa2 50%, #3fffa2 50%, #1a9be0 73%, #ba68ed 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(left, #e5405e 0%, #ffdb3a 25%, #3fffa2 50%, #3fffa2 50%, #1a9be0 73%, #ba68ed 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #e5405e 0%, #ffdb3a 25%, #3fffa2 50%, #3fffa2 50%, #1a9be0 73%, #ba68ed 100%);
}
.gradient-2{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a9db80+0,ad6fbc+17,db8181+38,f2f28e+62,6fb8bc+83,96c56f+100 */
background: #a9db80; /* Old browsers */
background: -moz-linear-gradient(left, #a9db80 0%, #ad6fbc 17%, #db8181 38%, #f2f28e 62%, #6fb8bc 83%, #96c56f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #a9db80 0%,#ad6fbc 17%,#db8181 38%,#f2f28e 62%,#6fb8bc 83%,#96c56f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #a9db80 0%,#ad6fbc 17%,#db8181 38%,#f2f28e 62%,#6fb8bc 83%,#96c56f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=1 ); /* IE6-9 */	
}

Now let them animation load and fill the progress bar to 100%

.shrinker {
	background-color: black;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
}
.timelapse {
	animation-name: timelapse;
	animation-fill-mode: forwards;
	animation-duration: 2s;
	animation-timing-function: cubic-bezier(.86, .05, .4, .96);
}

Need to define the timelapse using @keyframe

@keyframes timelapse {
	0% {
		width: 100%;
	}
	100% {
		width: 0%;
	}
}