A Complete Guide to Creating Professional Preloaders with Elementor Pro to Improve the Website Loading Experience

When building a website with Elementor, it's critical to create a smooth visual experience for your users.preloaderIt is possible to show loading animations before the page content is fully loaded. Below, we'll give you a step-by-step guide on how the Elementor Pro Create a preloader in the

What is a preloader?

A preloader is usually an image or animation that a website displays before the content is fully loaded. With preloaders, brand logos or specific animations can be displayed to give users a more professional and smooth browsing experience.

Step 1: Create a title template

First, it is necessary toCreate a title templatein order to apply the preloader to all pages of the site.
Operational Steps:

1. Navigate to the Elementor dashboard in the templates > Theme GeneratorThe

2. strike (on the keyboard) caption section, and then click the + icon to create a new title template.

3. After completing the setup of the template, click post and apply the display conditions.

The system will pop up Display conditions Window. Here, select the range of pages to which you want to apply this header template. Select the Entire site will ensure that this title is displayed on all pages. Confirm the selection and click Save and close to complete the release.

Step 2: Add the container and set the CSS ID

Within the title template, add a container to hold the preloaded animation.
Operational Steps:

1. On the edit page of the title template, add asingle column containerThe

2. Click on the container'shigh leveltab, set the CSS ID to der_preloadThe

Step 3: Add Widget Icon or Image

Add visual effects to the preloader, such as icons or brand logos.
Operational Steps:

1. In the container, add the icon (computing) maybe imagery Widget.

2. In the widget'shigh levelmenu, set the CSS ID to der_loaderThe

3. go intotypemenu, resize the icon (recommended setting is 1) to fit your design needs.

Step 4: Add HTML Widget to Run Scripts

Next, add the HTML widget and insert the JavaScript code to control the showing and hiding of the preloader.
Operational Steps:

1. Below an icon or image widget add HTML Widget.

2. Insert the following code:

<script> document.addEventListener('DOMContentLoaded', function () { setTimeout(function () { document.getElementById('der_preload').style.display = 'none'; document.getElementById('content').classList.add('visible'); }, 2000); }); </script>

3. In the HTML widget'shigh leveloption, set the CSS ID to der_preloader_adds, in order to hide the widget and avoid unnecessary white space.

Step 5: Add Custom CSS

To make the preloader work properly, add some CSS code to spruce up the preloading effect.

1. Click the page setup icon to open thehigh levelMenu.

2. Paste the following code in the Custom CSS field:

#der_preload { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; align-items. center; justify-content: center; z-index: 1000; } #der_loader { border: 8px solid #363636; border-top: 8px solid #3498db; border- radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #der_preloader_adds { display: none; }

Step 6: Publish and Test the Preloader

Publish your template andSetting display conditionsto ensure that the preloader is displayed properly on the specified page.
Operational Steps:

1. strike (on the keyboard) post, in the Display Conditions pop-up window, select Entire siteThe

2. Save the settings and visit your website page to check if the preloader is working as expected.

summarize

With the steps above, you have successfully created a customized Elementor Pro preloader. You can further personalize the preloader by tweaking the CSS and JavaScript code to align it with your brand's style.