Create A Custom Loader

Introduction

Some users may find they want to create their own custom loader that will compliment their payment form. By creating a form and placing it within your active theme's woo-payment-gateway folder, you will be able to set the loader as active in your settings.

In order to display a loader with your payment form there are several steps you must follow.

1. Ensure you have created the woo-payment-gateway directory in your active theme folders.

   

2. Create a folder called loader.

   

3. In the new loader folder, create a php file and give it a descriptive name.

   

4. Add your custom html and styles to the file.

   html

   <div class="container">
    <h1><?php _e('Processing Payment...', 'braintree-payments')?></h1>
   </div>

   styles

   body.bfwc-body .bfwc-new-payment-method-container .bfwc-payment-loader {
   	background: rgba(0, 0, 0, .65);
   	display: flex;
   	display: -webkit-flex;
   	justify-content: center;
   	align-items: center;
   }
   
   body.bfwc-body .bfwc-new-payment-method-container .bfwc-container h1{
   	opacity: 0;
   	color: #fff;
   	font-size: 28px;
   	animation-timing-function: ease-in-out;
   	animation-name: custom-animation;
   	animation-duration: 2.0s;
   	animation-iteration-count: infinite;
   }
   @-webkit-keyframes custom-animation{
   	0%{
   		opacity: 0;
   	}
   	50%{
   		opacity: 1;
   	}
   	100%{
   		opacity: 0;
   	}
   }
   @keyframes custom-animation{
   	0%{
   		opacity: 0;
   	}
   	50%{
   		opacity: 1;
   	}
   	100%{
   		opacity: 0;
   	}
   }

5. Save your file and navigate to the Checkout settings page of the plugin. On the load drop-down, you will see your custom loader as an option. Select your custom loader and save your settings.

   

6. On any page that uses your payment form such as Checkout, Add Payment Method, etc you will see your custom loader when a payment method is being processed.