---
title: "How to Add Custom CSS Preloader Animations in Elementor?"
url: https://theplusaddons.com/docs/custom-css-preloader-animations-in-elementor/
date: 2023-04-07
modified: 2026-09-18
lang: en
author: "Aditya Sharma"
description: "The Pre Loader widget ships with thirteen ready-made animations, but you may already have a CSS loader that matches your brand, or have found one on a site such as..."
image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Add-Custom-CSS-Preloader-Animations-in-Elementor_-1024x536.jpg
word_count: 689
---

# How to Add Custom CSS Preloader Animations in Elementor?

## 

- The Pre Loader widget ships with thirteen ready-made animations, and it also offers a Custom Code type for loading a brand-matched loader from your own markup.
- The Plus Addons for Elementor Pro includes the Pre Loader widget, while the free plugin does not contain it, so the widget must be installed and activated in Pro.
- The Code field accepts only HTML markup such as ``, and `` or `` tags are stripped from the field.
- The site-wide Pre Loader setting must be set to Entire Site before the preloader CSS and JavaScript load on the front end, and the stylesheet must live separately in The Plus Addons > Extra Options > Custom CSS & JS, Elementor Custom CSS, or a theme stylesheet.

The Pre Loader widget ships with thirteen ready-made animations, but you may already have a CSS loader that matches your brand, or have found one on a site such as [CSS Loaders](https://cssloaders.github.io/) or [Loading.io](https://loading.io/css/).

The **Custom Code** type in the **Pre Loader** widget takes your own markup and draws it on the 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.- **Somewhere to put the CSS:** the widget's **Code** field takes markup only, so you need a place for the stylesheet — your theme's custom CSS, Elementor's Custom CSS, or The Plus Addons' own **Extra Options > Custom CSS & JS**.

## Add the Markup

- Add the **Pre Loader** widget to the page or to a header or footer template.- On the **Content** tab, open the item in the **Preloader** list.- Set **Select** to **Custom Code**.- Paste **only the HTML** of your loader into the **Code** field, for example the markup below.- Update the page.

`<div></div>`

![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)

![Pasting a custom loader](https://theplusaddons.com/wp-content/uploads/2023/04/add-custom-css-loader-code.gif)

## Add the CSS Separately

> ***Do not paste a <style> block into the Code field.** The field is filtered before it is printed, and the filter removes <style> tags but keeps the text inside them. We tried it: the CSS appeared as a paragraph of words in the middle of the loading screen and the loader itself was never styled.*

Put the stylesheet where it loads for the whole site instead. Any of these work, because the preloader markup is part of the page like any other element:

- **The Plus Addons > Extra Options > Custom CSS & JS**- Elementor's **Custom CSS** field, on the widget's **Advanced** tab or in **Site Settings**- Your theme's or child theme's stylesheet

The CSS itself is whatever your loader needs, for example:

`.my-loader{width:64px;height:64px;border:8px solid #e9e9ff;
border-top-color:#5b5bd6;border-radius:50%;
animation:my-spin 1s linear infinite}
@keyframes my-spin{to{transform:rotate(360deg)}}`

![A custom CSS loader running as the page loading animation](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-custom-code-demo.gif)

## How It Behaves

- The markup is printed inside the preloader overlay, so your CSS should target your own class, not the widget's.- Tags that WordPress does not allow in post content are stripped from the **Code** field. Plain elements such as `div` and `span` with a class survive; `<style>` and `<script>` do not.- The animation runs for as long as the overlay is up, and stops when it is removed.- The **Style** tab has no section for this type; only **Style > Box** affects the container and the background.

## Limitations

- `<style>` and `<script>` cannot be used in the **Code** field.- There is no preview of the finished loader in the editor; **Backend Visibility** only shows a static placeholder.- Nothing appears on the front end until the site-wide **Pre Loader** setting is on.

## Troubleshooting

### The loading screen shows my CSS as text

The `<style>` tag was stripped and its contents were left behind. Remove the style block from the **Code** field and move the CSS to your site's stylesheet.

### The markup is there but nothing is styled

The stylesheet is not loading on this page, or the class names do not match. Inspect the loading screen and check the class on your element.

### I want something simpler

Set **Select** to **Predefined** and pick one of the thirteen built-in animations, or use a [Lottie file](https://theplusaddons.com/docs/lottie-file-preloader-animation-in-elementor/).

## Related Docs

- [Preloader Elementor Widget Settings Overview](https://theplusaddons.com/docs/preloader-elementor-widget-settings-overview/)- [How to Add Shortcode Based Preloader Animation in Elementor?](https://theplusaddons.com/docs/shortcode-based-preloader-animation-in-elementor/)- [How to Add Lottie File Preloader Animation in Elementor?](https://theplusaddons.com/docs/lottie-file-preloader-animation-in-elementor/)