< All Topics
Widget Used
Pre Loader
Demo URL
Click Here
Tutorial Videos
Official Video

If you want to set a pre-effect before the content in your website loads, so we have made a well-designed preloader widget. Using this widget gives you a better look at the pre-loading time of the content with the preloader custom option.

Pro tip
Why not add this widget to your website/product? Because using this widget you can customize the content pre-loading effect, and it will be sufficiently useful for your content as well as with the custom style option.

How to use the PreLoader Widget of The Plus Addons For Elementor

The Preloader widget comes with some different types of pre-loader menus. With the custom styling options, you can create a pleasant-looking pre-effect for your websites.

General Steps

Search for the Preloader element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Preloader widget. First, click on the Content tab.

1. Content

PreLoader

1.1: Content
PreLoader Repeater

Select Menu

We have provided Eight different types for The PreLoader. Select your desired type for The PreLoader. you can set the field where you want to set it, such as the top, middle, bottom, and add and remove it. you can watch this video to know more about it. The types we provided are:

Image
Icon
Text Content

Predefined
Lottie
Custom Code
Shortcode
Progress

Select Image

With this option, you can set the image as a Pre loader when the Image option is selected in the select type menu.

Loader on Image

By enabling this option, you can see Loader on the image when the Image option is selected in the select type menu.

Select Icon

With this option, you can set the icon as a Pre loader when the Icon option is selected in the select type menu.

Content

With this option, you can set the custom text as loading content when the Text Content option is selected in the select type menu.

Loader on Text

By enabling this option, you can see Loader on the text when the Text Content option is selected in the select type menu.

Select Predefined Animation Type

We have provided twelve different types of predefined animation. With this option, you can give the animation effect of the Preloader when the predefined option is selected in the select type menu.

Lottie URL

With this option, you can set the URL of the Preloader when the Lottie option is selected in the select type menu. Only the JSON file will accept this option.

Width

With this option, you can set the width of the Preloader when the Lottie option is selected in the select type menu.

Height

With this option, you can set the height of the Preloader when the Lottie option is selected in the select type menu.

Speed

With this option, you can set the loading speed of the Preloader when the Lottie option is selected in the select type menu.

Loop Animation

By enabling this option, you can see the loop animation effect on the Preloader when the Lottie option is selected in the select type menu.

Code

With this option, you can set the custom code for the Preloader when the Custom Code option is selected in the select type menu.

Shortcode

With this option, you can set the custom shortcode for the Preloader when the Shortcode option is selected in the select type menu.

Select Layout

We have provided Six different layouts for the Progress bar. Select your desired layout for the Progress bar. The layouts we provided are:

Layout 1
Layout 2

Layout 3
Layout 4
Layout 5
Layout 6

Position

With this option, you can set the top or bottom position of layout two for the progress bar when the progress option is selected in the select type menu.

Prefix

With this option, you can set the custom prefix text of layout three for the progress bar when the progress option is selected in the select type menu.

Postfix

With this option, you can set the custom postfix text of layout three for the progress bar when the progress option is selected in the select type menu.

Backend Visibility

By enabling this option, you can see a static Preloader area just for design purposes.

PreLoader (WordPress Panel)

If you disable this, it will stop loading the frontend and in the backend throughout the website and you can use preloader for all the posts or pages of the website.
If you enable this, you can use a preloader for the current active posts or pages of the website.

Load Lottie JS in PreLoader (WordPress Panel)

If you enable this, It will load Lottie JS.

PreLoader in Specific Page/Post (WordPress Panel)

You can add page/post id separated by comma to load this on those specific posts or pages and you can use Preloader for all the posts or pages of the website when Preloader is disabled.

1.2: Load First

Exclude Content

By enabling this option, you can see the excluded content in a different option here.

Select Exclude

We have provided two different types of exclude content. Select your desired type and set the content where you want. The types we provided are:

Header
Custom

Class

With this option, you can set the custom class for the custom type exclude content here.

Position

With this option, you can set the top or bottom position for the loading content when the custom option is selected in the select exclude type menu.

Z-Index

With this option, you can set the z-index for the loading content here.

1.3: Page Transition

Select In/OutTransition

We have provided five different types for The In/Out Transition. Select your desired type for The In/Out Transition. You can watch this video to know more about it. The types we provided are:

Fade
Slide
Triple Swoosh

Simple
Duo Move

Select Slide Direction (In/Out Transition)

We have provided four different types of slide directions for the transition. Select your desired type of slide direction and set the transition effect for the preloader. You can watch this video to know more about it. The types we provided are:

Left
Right
Top

Bottom

Select Direction (In/Out Transition)

We have provided eight different types of directions (triple swoosh, simple, duo move) for the transition. Select your desired type of direction (Triple swoosh, Simple, Duo move) and set the transition effect for the preloader. You can watch this video to know more about it. The types we provided are:

Left
Right
Top

Bottom
Top Left
Top Right
Bottom Left
Bottom Right

Exclude Class

With this option, you can set the exclude class for the out transition effect here.

1.4: Extra Options

Select Load Time

We have provided three different types of load time for the preloader. Select your desired type of load time for the preloader. You can watch this video to know more about it. The types we provided are:

Default
Minimum
Maximum

Minimum Time (Second)

With this option, you can set the minimum time in the second for the preloader.

Maximum Time (Second)

With this option, you can set the maximum time in the second for the preloader.

2.Style

The Style tab is used to customize all the PreLoader widget components such as Image, Icon, Text, Predefined, Progress Bar, Progress Number, Progress Circle, Transition Effect, and Box.

Image Style

Set Max Width, Margin, Border, Border Radius, Box Shadow, and Image Loader (Opacity, CSS Filters) for the Image here.

Icon Style

Set Size, Padding, Margin, Color, Background, Border, Border Radius, and Box Shadow for the Icon here.

Text Style

Set Padding, Margin, Typography, Color, Background, Border, Border Radius, Box Shadow, and Text Loader (Color) for the Text here.

Predefined Style

Set Padding, Margin, Color 1 (Background Color), and Color 2 for the Predefined here.

Progress Bar Style

Set Width, Height, Margin, Gradient Color Switcher (Color 1 To Color 7), Color 1, Color 2, Progress Empty Color (Layout 4), Progress Size (Layout 5), Border, and Border Radius for the Progress Bar here.

Progress Number

Set Typography, Color, Progress Layout 3 (Prefix – Typography, Color), and (Postfix – Typography, Color) for the Progress Number here.

Progress Circle

Set Empty Color, Fill Color, Stroke Width, and Percentage Styling (Typography, Color) for the Progress Circle here.

Transition Effect

Set Color 1, Color 2, and Color 3 for the Transition here.

Box Style

Set Width, Padding, Background, Border, Border Radius, Box Shadow, and Whole Background (Background) for the Box here.

Preview

Here you can see with details how the Style option of the Pre Loader Widget works.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?