--- title: "How to Combine Multiple Preloaders Animations on a Page in Elementor?" url: https://theplusaddons.com/docs/multiple-preloaders-animations-in-elementor/ date: 2023-04-07 modified: 2026-09-18 lang: en author: "Aditya Sharma" description: "One preloader is often enough, but a logo with a spinner under it, or an animation with a short message, reads better than either on its own. The Preloader list..." image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Combine-Multiple-Preloaders-Animations-on-a-Page-in-Elementor_-1024x536.jpg word_count: 718 --- # How to Combine Multiple Preloaders Animations on a Page in Elementor? ## - Utilizes the Preloader widget from The Plus Addons for Elementor to combine multiple preloaders for enhanced loading animations. - Enables users to select and customize preloader options through the Content tab in the Preloader widget settings. - Requires installation and activation of The Plus Addons for Elementor to access the Preloader widget features. One preloader is often enough, but a logo with a spinner under it, or an animation with a short message, reads better than either on its own. The **Preloader** list in the **Pre Loader** widget is a repeater, so you can add as many items as you like and they are all drawn on the same loading screen. *To check the complete feature overview documentation of The Plus Addons for Elementor Pre Loader widget, [click here](https://theplusaddons.com/docs/preloader-elementor-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/preloader-and-page-transition/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** **Pro** — the **Pre Loader** widget ships only in The Plus Addons for Elementor Pro. The free plugin does not contain it.- **Widget to enable:** **Pre Loader**, under **The Plus Addons > Widgets**. Search for it and turn the toggle on.- **Site-wide switch:** go to **ThePlus Addons > Extra Options > Settings**, open the **Design** tab, click the gear on the **Pre Loader** card and set **Pre Loader** to **Entire Site**, then **Save**. Until this is set, the preloader's CSS and JavaScript are never loaded on the front end and nothing appears.- **Where the settings are:** select the **Pre Loader** widget and use the **Content** tab's four sections — **Content**, **Load First**, **Page Transition** and **Extra Option** — plus the **Style** tab. ## Add a Second Preloader - Select the **Pre Loader** widget and stay on the **Content** tab.- Set up the first item in the **Preloader** list as usual — pick a type in **Select** and fill in its fields.- Click **+ ADD ITEM** under the list.- Open the new item and choose a different type in its **Select** dropdown.- Repeat for any further items, then update the page. ![The Pre Loader widget in the Elementor editor with the Preloader item open and the Select dropdown showing the preloader types](https://theplusaddons.com/wp-content/uploads/2026/09/preloader-content.webp) Each row in the list is labelled with its own **Select** value, so a list of *Image* and *Text Content* tells you at a glance what the loading screen holds. ## What It Looks Like On the published page all the items are drawn together, one under the other, in the order they appear in the list. Our test used **Predefined** with **Animation 1** plus **Text Content**, and both were on screen at the same time. ![Two preloaders shown together on one Elementor loading screen](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-multiple-loader-demo.gif) ## Combinations That Work Well | First item | Second item | Result | | ---------- | ----------- | ------ | | **Image** (your logo) | **Predefined** | Logo with a spinner under it | | **Predefined** | **Text Content** | Animation with a short message | | **Image** | **Progress** | Logo with a progress bar and a percentage | | **Lottie** | **Text Content** | Branded animation with a caption | ## How It Behaves - Every item in the list is rendered; there is no limit built into the widget.- Items stack in list order. Drag a row to reorder it.- Each item keeps its own settings, but the **Style** tab is shared: all **Text Content** items use the same text styling, all **Icon** items the same icon styling, and so on.- Watch out for white-on-white: the loading background and the **Predefined** animations are both white, and neither **Style > Predefined > Color 1** nor **Style > Box > Whole Background** changed that in our test. Pair a Predefined item with something that is visible on white, such as an image or coloured text. ## Limitations - You cannot style two items of the same type differently — the Style tab has one section per type, not per item.- There is no layout control for the stack: items are simply drawn one after another.- Each extra item is more to load before the page appears, so keep the list short.- Nothing appears on the front end until the site-wide **Pre Loader** setting is on. ## Troubleshooting ### Only one preloader shows Check that the second item has a value: an **Image** item with no image, or a **Lottie** item with no URL, renders nothing. ### One item is invisible It is probably a **Predefined** animation, which is drawn in white on the white loading background. The widget's own stylesheet is loaded after Elementor's generated CSS, so a few Style controls whose rules are not scoped to the widget are overridden. The correct CSS is generated; the plugin's own rule simply wins. Use a type you can colour instead, such as **Text Content**, **Icon** or **Custom Code**. ### The items are in the wrong order Drag the rows in the **Preloader** list; the drawing order follows the list. ## Related Docs - [Preloader Elementor Widget Settings Overview](https://theplusaddons.com/docs/preloader-elementor-widget-settings-overview/)- [How to Add Page Loading Transition Effects in Elementor?](https://theplusaddons.com/docs/page-loading-transition-effects-in-elementor/)- [How to Add Image Preloader Animation in Elementor?](https://theplusaddons.com/docs/image-preloader-animation-in-elementor/)- [How to Add Text Based Preloader Animation in Elementor?](https://theplusaddons.com/docs/text-based-preloader-animation-in-elementor/)