Gravity Forms Spinner

Create rotating ajax spinner for Gravity Forms

by Jon Fuller

HTML

<div>
<h1>New Spinner</h1>
<button href="#0">Button</button> <img class="gform_ajax_spinner" src="https://freshysites.com/wp-content/uploads/lime-spinner.png"><br>
<em>Cool, eh?</em>
<hr>
<h1>Old Spinner</h1>
<button href="#0">Button</button> <img class="gform_ajax_spinner" src="https://freshysites.com/wp-content/plugins/gravityforms/images/spinner.gif"><br>
<em>Ewww, right?</em>
</div>

CSS

html {
	font-size: 14px;
	line-height: 28px;
	font-family: sans-serif;
	background-image: url(https://freshysites.com/wp-content/uploads/2013/10/bg2.jpg);
	background-size: cover;
	background-position: center center;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

* {
	box-sizing: border-box;
}

div {
	text-align: center;
	color: white;
	flex-grow: 1;
}

div::before {
	background-color: rgba(0,0,0,0.5);
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: -1;
}

img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
	margin-left: 0.6rem;
}

img.gform_ajax_spinner[src$=".png"] {
	-webkit-animation: lime-spin 1.5s linear infinite;
	-moz-animation: lime-spin 1.5s linear infinite;
	animation: lime-spin 1.5s linear infinite;
	padding: 0;
	margin-left: 10px;
}
@-moz-keyframes lime-spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes lime-spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes lime-spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

JavaScript

// All you need to do is upload a spinner PNG image 
// that is 16px by 16px,
// then add this PHP function, 
// and the custom img class and keyframes 

// use a custom Gravity Forms AJAX spinner
add_filter( 'gform_ajax_spinner_url', 'fs_custom_gforms_spinner', 10, 2 );
function fs_custom_gforms_spinner( $image_src, $form ) {
  	$upload_dir = wp_upload_dir();
	$lime_spinner_url = $upload_dir['baseurl'] . '/lime-spinner.png';
    return $lime_spinner_url;
}