Simple Animated Progress Bars

Progress bars are a great way to let users know how far along they are when asking them to perform an action on your website. When completeing a long questionnaire or completing a series of forms in a course they can give the user a great visual way of understanding how far is left to go and how long to expect the process to take.

My Progress Bar 1

60%

My Progress Bar 2

The HTML

The html for both of these demos is very simple and can be adjusted as you need to add in extra information like a title, numerical indicator of the completion percentage or whatever else you need.

<h6>My Progress Bar 1</h6>
<div class="progress1">
   <div class="progress-value1" style="width: 60%"><span>60%</span></div>
</div>

<h6>My Progress Bar 2</h6>
<div class="progress2">
   <div class="progress-value1" style="width: 60%"></div>
</div>

The CSS

The CSS is also very straight forward and as per the HTML can be adjusted to meet your exact requirements.

/* Progress Bar 1 */

.progress1 {
	background: rgba(0, 0, 0, 0.1);
	justify-content: flex-start;
	border-radius: 100px;
	align-items: center;
	position: relative;
	padding: 0 5px;
	display: flex;
	height: 40px;
	width: 100%;
}

.progress-value1 {
	animation: load 3s normal forwards;
	box-shadow: 0 10px 40px -10px #fff;
	border-radius: 100px;
	background: #e03c83;
	height: 30px;
	width: 0;
}

.progress-value1 span {
	color: #fff;
	font-size: 14px;
	text-align: center;
	display: block;
}

@keyframes load {
	0% {
		width: 0;
	}
}

/* Progress Bar 2 */

.progress2 {
	background: rgba(0, 0, 0, 0.1);
	justify-content: flex-start;
	border-radius: 100px;
	align-items: center;
	position: relative;
	padding: 0;
	display: flex;
	height: 25px;
	width: 100%;
}

.progress-value2 {
	animation: load 3s normal forwards;
	box-shadow: 0 10px 40px -10px #fff;
	border-radius: 100px;
	background: #7f3690;
	height: 25px;
	width: 0;
}

@keyframes load {
	0% {
		width: 0;
	}
}

Populating with Formidable Forms Data

How you populate the progress bars with your own data is up to you but for Formidable Forms users you can easily populate the progress bars using the frm-stats and frm-math shortcodes or using a URL parameter.

Simply swap out the percentage value in the in-line css for a frm-stats or frm-math shortcode and you’re good to go.

For example:

My frm-stats Progress Bar

64%

<h6>My frm-math Bar</h6>
<div class="progress1">
   <div class="progress-value1" style="width: [ frm-stats id=179 type=count ]%"><span>[ frm-stats id=179 type=count ]%</span></div>
</div>

Change 179 to your field ID and remove the spaces around the square brackets in the example above.

**Populating with Live Formidable Forms Data**

You can also use Angular.JS to populate progress bars dynamically within the form using live data and field calculations.

For example:

Simple Animated Progress Bars