Enqueue the JS File, Add Progress Bar to Checkout Page

functions.php

/* Enqueue the JS File for manipulating the Progress Bar */
function my_theme_scripts() {
    wp_enqueue_script( 'wc-checkout-progress-bar', get_stylesheet_directory_uri() . '/js/wc-checkout-progress-bar.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

/* Add the Progress Bar to the Checkout Page */
function ar_add_progress_bar(){
 echo do_shortcode('[wppb progress=50 option="animated-candystripe purple"  location=inside fullwidth=true]');
}
add_action('woocommerce_checkout_before_customer_details', 'ar_add_progress_bar');

wc-checkout-progress-bar.js

/*! jquery.observe.js v0.0.1 | MIT License | gist.github.com/yckart/c893d7db0f49b1ea4dfb */
jQuery.observe = function (method, getter) {

  // store the original handler function
  var originalMethod = jQuery.fn[method];

  jQuery.fn[method] = function () {

    // cache $(this)
    var self = this;

    // store the old value
    var oldValue = getter.call(self, arguments);

    // execute the original hanlder and store its return value
    var result = originalMethod.apply(self, arguments);

    // store the new value
    var newValue = getter.call(self, arguments);

    // trigger the custom event and pass the stored old & new value
    self.trigger(method, [oldValue, newValue]);

    // return the result from the original handler.
    return result;
  };
};
/*! jquery.observe.class.js v0.0.1 | MIT License | gist.github.com/yckart/c893d7db0f49b1ea4dfb */
(function ($) {
  var methods = ['addClass', 'toggleClass', 'removeClass'];

  jQuery.each(methods, function (index, method) {
    jQuery.observe(method, function () {
      return this.className;
    });
  });
}(window.jQuery || window.Zepto));


var $node = jQuery('.form-row')
.on('addClass removeClass', function (e, oldClass, newClass) {
    //console.log('Changed from %s to %s due %s', oldClass, newClass, e.type);
  });
  
jQuery(".form-row").on('addClass removeClass', function(e){
		// Count number of Fields that require validation
		var numFields = jQuery('.validate-required').length;
		// Count number of Fields that Require Validated and Have Been Validated
		var validatedFields = jQuery('.validate-required.woocommerce-validated').length;
		// Check whether Shipping and Billing Addresses match
		if (jQuery(".shipping_address").css('display') == 'none')
		{
			// Count the number of fields that belong to Shipping Address
			var numShippingFields = jQuery(".shipping_address > .validate-required").length;
			// Count the number of fields that belong to Shipping Address
			var numShippingValidatedFields = jQuery(".shipping_address > .validate-required.woocommerce-validated").length;
			
			numFields = numFields - numShippingFields;
			
			validatedFields = validatedFields - numShippingValidatedFields;
			
			//console.log('Number of Shipping Fields = ' + numShippingFields);
			//console.log('Number of Shipping Validated Fields = ' + numShippingValidatedFields);
		}
		
		// Get the width of the Progess Bar in Pixels
		var widthOfProgressBar = jQuery(".wppb-wrapper").width();
		// Start at 25% progress
		var barWidth = (widthOfProgressBar * 3)/(4 * numFields);
		var progress = widthOfProgressBar/4 + validatedFields * barWidth;
		var progressPixels = progress + "px";
		var insideText = validatedFields + "/" + numFields;
		
		if (progressPixels > widthOfProgressBar)
		{
			progressPixels = widthOfProgressBar;
			insideText = numFields + "/" + numFields;
		}
		
		//jQuery('#billing_company').val(barWidth);
		// Set the Progress of the Bar
		jQuery('div.wppb-progress > span').css('width', progressPixels);
		// Set the text for number of validated fields/total number of fields
		jQuery(".wppb-wrapper > .inside").html(insideText);
		
})