Beautifying Gravity Forms’ AJAX spinner

Swapping out that ugly GIF spinner with some fancy animated CSS

Gravity Forms is one of my favorite WordPress plugins. With a rich assortment of addons and capabilities and a friendly user interface, it makes building and managing web forms a breeze.

That is… until you click “Submit” and see this atrocious spinner:

Why?!?! This little bugger can be quite the eye sore, especially when you don’t have a solid white background. Luckily, Gravity Forms comes with a built-in filter that will allow us to swap this fella out…

1. Remove the Gravity Forms Spinner Image Using the gform_ajax_spinner_url Filter

Thanks to Gravity Forms’ gform_ajax_spinner_url filter (see documentation), we can swap this out with whatever we want. Now we could simply provide an URL to another image, but instead we’re going to replace the image with a 1x1px transparent GIF so we can then style our spinner in our CSS instead.

Drop the following into your theme’s functions.php file:

/* Change Gravity Forms' Ajax Spinner into a transparent image */
add_filter( 'gform_ajax_spinner_url', 'spinner_url', 10, 2 );
function spinner_url( $image_src, $form ) {
    return  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
}

Voilà! We’ve made our spinner disappear! Now let’s make it re-appear with some CSS…

2. Create an Animated CSS Spinner by Styling the .gform_ajax_spinner Element

This can be a bit tricky to track down, as it will only show up on your screen briefly when clicking the form’s submit button, but once you know Gravity Forms’ spinner element’s class name is gform_ajax_spinner, the world is your oyster in how you want to style it.

But for a simple example, let’s drop the following into your theme’s style.css file:

/* Spinner */
.gform_ajax_spinner {
	box-sizing: border-box;
	margin-top: 11px;
	margin-left: 10px;
    border: 3px solid rgba(247,150,33,1);
    border-left: 3px solid rgba(247,150,33,0);
    border-top: 3px solid rgba(247,150,33,.15);
    border-right: 3px solid rgba(247,150,33,.5);
	animation: spinner 1.1s infinite linear;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	position: absolute;
	z-index: 1;
}
@keyframes spinner {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

3. You’re Done! But Before You Go, Let’s Preview Our Masterpiece

Let’s bring it all together into one pseudo-HTML file and see how it looks:

<style>
  /* Spinner */
  .gform_ajax_spinner {
	box-sizing: border-box;
      margin-top: 11px;
      margin-left: 10px;
      border: 3px solid rgba(247,150,33,1);
      border-left: 3px solid rgba(247,150,33,0);
      border-top: 3px solid rgba(247,150,33,.15);
      border-right: 3px solid rgba(247,150,33,.5);
      animation: spinner 1.1s infinite linear;
      border-radius: 50%;
      width: 16px;
 	  height: 16px;
      position: absolute;
      z-index: 1;
  }
  @keyframes spinner {
      0% {
          transform: rotate(0deg);
      }
      100% {
          transform: rotate(360deg);
      }
  }
  .btn {
      display: inline-block;
      font-weight: 400;
      color: #212529;
      text-align: center;
      vertical-align: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-color: transparent;
      border: 1px solid transparent;
      padding: .375rem .75rem;
      font-size: 1rem;
      line-height: 1.5;
      border-radius: .25rem;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
      color: #fff;
      background-color: #f6951c;
      border-color: #f6951c;
      cursor: pointer;
  }
</style>
<button class='btn' style='display:inline-block;vertical-align:middle;'>Submit</button><div class='gform_ajax_spinner' style='display:inline-block;vertical-align: middle;'></div>

BEAUTIFUL! And since it’s all defined in our CSS, it’s easy to swap out colors as needed and we avoid all those scratchy, blocky, not-quite-transparent edge pieces that were in the animated GIF spinner.

Now it’s your turn! If you come up with any fun spinners you’d like to share, post it below in the comments!