AJAX loader: Custom Animation with Html & Css

Hi bricks team,

There is a feature request on the idea board for Ajax loader that somewhat addresses the current limitation on animation selection.

But it would be much better if we can create completely custom animation in AJAX loader using Html & Css. Because there would be no limitations.

Hi @HOSEIN ,

Not sure if Query AJAX loader (Start) and (End) can fulfill your needs? (Disable the AJAX loader on the query or ajax popup)

You can build your own custom loader follow your structure and hide it in somewhere. Then use this interaction to display or hide the loader when necessary.

Regards,
Jenn

Hi @itchycode,

Thanks for the reply and sorry for the delay.

Yes, I first tried to achieve the desired result using the code element. But for several reasons the default query loop ajax loaders seem more suitable.

The most important reason is that native ajax loader does not render in DOM after page load. But this is not the case in custom ajax loader. For example, here the search box below uses native ajax loader. After the page loads, we see the number of DOM or search boxes.

honestly Iā€™m not sure if this feature request makes sense in terms of coding and implementation. But I think it would be great if there was a way to create custom animations alongside native animations. Then, like other native animations, we can use CSS selector to display the custom animation at the desired location.

1 Like

Alright, understand what you mean now. :+1:
Yes, the native AJAX loader is using JS to insert the loading HTML dynamically.

1 Like