Loading Screen (Page Preloader)

How to Access this Panel?

Open Site Settings panel in Elementor using this guide Accessing Theme Options Panel and select Asli / Loading Screen.

Enabling or Disabling the Preloader

Use the Enable Page Preloader toggle in the panel.

If you'd like the site preloader to appear only once after the initial site load, switch on the Show Only Once toggle. When enabled, further site navigation will continue without the preloader until the user closes the current browser tab.

Customizing Text Content

Activate the Options tab in the panel. Here, you can input the text that appears during the preloader scene.

Customizing Fast-sliding Images

Activate the Options tab in the panel. Use the Enable Fast-sliding Images toggle to control whether the effect should be enabled. When the toggle is active, use the control field below to edit the images that will appear during the sliding effect.

Changing Typography and Colors

Activate the Style tab in the panel. Use the controls shown below to adjust the preloader background color, image opacity, text typography, and colors.

Adjusting Animation Speed

Activate the Animations tab in the panel. Use the controls shown below to tweak the animation speed. You can make it faster or slower using the Animation Speed slider. Some other options (e.g., Amount of Loading Steps) also affect the total duration of the preloader animation.

Disabling Preloader on Certain Pages

If you'd like the loading screen not to appear on certain pages or posts, follow the steps below:

▶️ Step 1.

Ensure that the preloader is enabled in Site Settings. Then, open the file 📄 wp-content/themes/<ThemeName lowercase />/inc/helpers/is_preloader_enabled.php in a text or code editor.

▶️ Step 2.

Copy the arts_is_preloader_enabled() function to 📄 wp-content/themes/<ThemeName lowercase />-child/functions.php in your child theme.

function arts_is_preloader_enabled() {
  $preloader_enabled                 = arts_get_kit_settings( 'preloader_enabled', false );
  $preloader_show_once_enabled       = arts_get_kit_settings( 'preloader_show_once_enabled', true );
  $preloader_logged_in_users_enabled = arts_get_kit_settings( 'preloader_logged_in_users_enabled', true );

  if ( isset( $_GET['preloader'] ) ) {
    $force_preloader_enabled = preg_replace( '/[^-a-zA-Z0-9_]/', '', $_GET['preloader'] );

    if ( $force_preloader_enabled === 'yes' ) {
      return true;
    } elseif ( $force_preloader_enabled === 'no' ) {
      return false;
    }
  }

  // Filter out 404 page
  if ( is_404() ) {
    return false;
  }

  // Filter out WooCommerce pages
  if ( function_exists( 'is_woocommerce' ) && is_woocommerce() ) {
    return false;
  }

  // Filter out WooCommerce-related pages
  if ( arts_is_checkout() || arts_is_cart() || arts_is_account_page() || arts_is_order_received_page() ) {
    return false;
  }

  // Don't render preloader inside Elementor editor
  if ( $preloader_enabled && ! arts_is_elementor_editor_active() ) {
    if ( ! $preloader_logged_in_users_enabled && is_user_logged_in() ) {
      return false;
    }

    if ( $preloader_show_once_enabled && ! is_customize_preview() ) {
      return ! arts_is_referer_from_same_domain();
    }

    return true;
  }
}

▶️️️️️ Step 3.

Add custom conditions for when this function should return false, which disables the preloader. See the examples below:

function arts_is_preloader_enabled() {
  $preloader_enabled                 = arts_get_kit_settings( 'preloader_enabled', false );
  $preloader_show_once_enabled       = arts_get_kit_settings( 'preloader_show_once_enabled', true );
  $preloader_logged_in_users_enabled = arts_get_kit_settings( 'preloader_logged_in_users_enabled', true );

  if ( isset( $_GET['preloader'] ) ) {
    $force_preloader_enabled = preg_replace( '/[^-a-zA-Z0-9_]/', '', $_GET['preloader'] );

    if ( $force_preloader_enabled === 'yes' ) {
      return true;
    } elseif ( $force_preloader_enabled === 'no' ) {
      return false;
    }
  }

  // Filter out 404 page
  if ( is_404() ) {
    return false;
  }

  // Filter out WooCommerce pages
  if ( function_exists( 'is_woocommerce' ) && is_woocommerce() ) {
    return false;
  }

  // Filter out WooCommerce related pages
  if ( arts_is_checkout() || arts_is_cart() || arts_is_account_page() || arts_is_order_received_page() ) {
    return false;
  }

  // Don't render preloader inside
  // Elementor editor
  if ( $preloader_enabled && ! arts_is_elementor_editor_active() ) {
    if ( ! $preloader_logged_in_users_enabled && is_user_logged_in() ) {
      return false;
    }

    if ( $preloader_show_once_enabled && ! is_customize_preview() ) {
      return ! arts_is_referer_from_same_domain();
    }

    return true;
  }

  // Ex. 1: Don't show preloader on post with ID "1234"
  if ( is_single( '1234' ) ) {
    return false;
  }

  // Ex. 2: Don't show preloader on page with ID "5678"
  if ( is_page( '5678' ) ) {
    return false;
  }

  // Ex. 3: Don't show preloader on homepage
  if ( is_front_page() ) {
    return false;
  }
}

TIP

If you're wondering how to find the specific page or post ID, please check this article: How to figure out the ID of a page or post?