Custom Spinner on Submit

API & Customization
1

Hi all! I have a bit of a unique situation. I have a form that has over 100 rules upon submitting and it takes a little while (like 30 seconds) for it to complete and then redirect to the next page. I would like to load a custom spinner using a gif file I created instead of the knackspinner when the user clicks submit on the form.

Anybody know how to do that? I am really good and copy and paste javascript...lol.

I have a basic understanding of how js works when I'm looking at it but I have no clue where to start.

Thanks!

3

If you right click on the spinner (in chrome) and hit "inspect" you can see how the spinner is set up. But it's only CSS, not javascript. Just add this to the CSS tab on the API zone in builder:

#kn-loading-spinner {

z-index: 3001;

background: url(https://your-gif-image-here.com) no-repeat center center;

position: center;

/* left: 50%;

top: 50%; */

opacity: 0.85;

height: 2560px;

width: 2560px;

margin-left: -1280px;

margin-top: -1280px;

};

My GIF was only 64x64 but here I just made it be inside a huge transparent box (the borders of which are off the screen). You can play with the properties