I recently completed a small project to add a few enhancements to an older WordPress site. The site, Pro Golf Fundraising, promotes fundraising events with Golf outings. One of the project goals, was to include some type of widget or animation that indicates the money raised over the years via golf fundraising events

After updating the site and plugins to the latest versions, properly enqueueing the existing scripts and styles, I was ready to tackle the animation. Since WordPress makes it easy to add jQuery UI elements, I decided to use the Progress Bar.

The first step was to select a color theme from the jQuery UI site. I chose “Blitzer” since it uses the red color my client wanted. Of course, you can use any other theme, or custom styles for the Progress Bar. After getting the files from jQuery, I uploaded only the CSS to the Pro Golf Fundraising site as WordPress already has the necessary JavaScript. Next, I added the style and Progress Bar reference in the functions.php:

1
2
3

wp_enqueue_style( 'progressbar', get_template_directory_uri() . '/jquery-ui-1.10.4.custom.min.css' );
wp_enqueue_script( 'jquery-ui-progressbar');  // the progress bar
wp_enqueue_script( 'progolfjs', get_template_directory_uri().'/js/progolf.js', 'jquery-ui-progressbar', 1.0, true); //custom js file to call the progress bar

The HTML to hold the Progress Bar looks like this:

1
2
3
4

<div id="progressyears">20 Years  -   540 Events</div>
	<div id="progressbar">
              <div class="progress-label">100,000</div>
        </div>

A small amount of custom CSS places the divs in the correct position:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#progressbar{
	margin-bottom:20px;
}
#progressyears {
	float:left;	
	font-weight:bold;
	font-size:14px;
	padding-top:5px;
	width:20%;
}
.ui-progressbar {
	position: relative;
}
.progress-label {
	color:#000;
	font-weight: bold;
	left: 50%;
	position: absolute;
	top: 4px;
}

And finally, the code in out custom JavaScript file, progolf.js, gets the Progress Bar working and completes the project:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

jQuery(document).ready(function($) {
 
	function numberWithCommas(num) {
    	return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	}
	 var progressbar = $( "#progressbar" ),
	 progressLabel = $( ".progress-label" );
	  progressbar.progressbar({
		  value: false,
		  change: function() {
			  progressLabel.text( numberWithCommas(progressbar.progressbar( "value" )*130000 ));
		  },
		  complete: function() {
			  progressLabel.text( "13.5 Million!" );
		  }
		});
		 function progress() {
			 var val = progressbar.progressbar( "value" ) || 0;
			 progressbar.progressbar( "value", val + 1 );
			 if ( val < 99 ) {
				 setTimeout( progress, 100 );
			 }
		 }
		 setTimeout( progress, 3000 );
 
});