How to show preloader on click?

[quexal]

I'm sure this is an easy one but I'm stumped. I'd like to be able to show the preloader onClick. I have full page loads that take a while to respond and would like the user to see a loading screen before the next page responds.
Thanks in advance for any assistance!

[cirebonweb]

You can reuse the AdminLTE 3.2.0 preloader after page load by resetting its CSS manually.
Here’s a simple helper:

function showPreloader() {
  const $pre = $('.preloader');
  $pre.css({
    height: '100%',
    display: 'flex',
    backgroundColor: 'rgba(255,255,255,0.3)' // transparent runtime
  });
  $pre.children().show();
}

function hidePreloader() {
  const $pre = $('.preloader');
  $pre.css('height', 0);
  setTimeout(() => { $pre.children().hide(); }, 200);
}

This mimics AdminLTE’s default shrink animation (height:0 + hide children), but lets you call it again on demand (e.g. before AJAX reloads).