Ajax loader to load content of a section - looking for tutorial

How To
1

Hi,

i have a complex form (WSForm) that takes some time to load. As the section stays blank until the section with the form is loaded, i would like to integrate a loader, so the visitor knows, that the content / form is still loading.

I need some help on how to. Examples really appreciated.

Thanks in advanceā€¦

1 Like
2

I would really like someoneā€™s input on this.

I would like to add a loader icon to checkout screen, after ā€œplace orderā€ button is clicked.

I presume we could use same solution for both of our use cases.

3

Iā€™m afraid there is no ā€œone fits allā€ solution here. The implementation of a loader icon is different for both cases and requires some custom javascript.

But you can use e.g. the default loader animation by adding this html:

<div class="brx-loading-animation"><div class="brx-loading-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>

and enqueueing this script:

<?php
wp_enqueue_style('bricks-ajax-loader');

you would need to find out if there are any ajax-related events or class/attribute changes on the elements (checkout screen / form) to show/hide the loader.