How to Add Custom CSS Preloader Animations in Elementor?

Updated onApril 11, 2026By

Key Takeaways

  • The Plus Addons for Elementor offers a Preloader widget that allows users to create custom CSS preloader animations.
  • Users can select Custom Code from the Preloader widget's dropdown to add their own CSS preloader code.
  • Custom CSS loading animations can be sourced from websites like CSSloaders and Loading.io.
Table Of Content

Do you want to add Custom CSS Preloader Animation in your Elementor website? With the Preloader widget from The Plus Addons for Elementor you get several preloader animation options, but you may want to create a custom CSS preloader animation that aligns with your website’s theme and branding.

You can easily use custom coded CSS preloader with the Preloader widget from The Plus Addons for Elementor.

To check the complete feature overview documentation of The Plus Addons for Elementor Preloader widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.

LIVE WIDGET LINK

Add the Preloader widget on the page or template, in the Content tab, you’ll find an item under Preloader.

Open the item and select Custom Code from the Select dropdown.

In the Code field, add your CSS Preloader code.

Preloader custom code

If you know HTML and CSS, you can create your own CSS loading animation, but if you don’t, then you can find many custom CSS loading animations on different websites like CSSloaders, Loading.io etc.

For example, we’ll use a CSS loading animation from the CSSloaders.

Click on the animation you like and it will show the HTML and CSS code in a popup. Copy the CSS first then in the Preloader widget add <style> </style> tag and paste the CSS in between the tag.

Like this –

<style>

Your CSS Code…

</style>

Then go back to the CSSloders site and copy the HTML and paste it in the Preloader widget.

Add custom css loader code

Note: You have to change the CSS to adjust the style of the loader.

Preloader custom code demo

That’s it. Now your custom CSS loading animation will show as the preloader.

Also, check How to Add Shortcode Based Preloader Animation in Elementor.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if my custom CSS preloader animation isn't displaying?

If your custom CSS preloader animation isn't showing, double-check that you've correctly added the CSS code within the tags in the Preloader widget. Ensure there are no syntax errors in your CSS. Also, verify that the Preloader widget from The Plus Addons for Elementor is installed and activated, as this widget is essential for using custom animations.

What are the best practices for creating custom CSS preloader animations?

When creating custom CSS preloader animations, aim for simplicity and clarity. Avoid overly complex animations that may confuse users. Use resources like CSSloaders to find inspiration and ensure your animation aligns with your website's branding. Remember to test the animation on different devices to ensure it performs well across platforms.

Does The Plus Addons for Elementor support third-party CSS animations?

The Plus Addons for Elementor allows you to incorporate third-party CSS animations as long as you can access the CSS code. You can copy animations from sites like CSSloaders and integrate them into the Preloader widget, provided you format the code correctly with tags.

What happens if I forget to include the tags in my CSS?

If you forget to include the tags in your CSS for the preloader animation, the code won't be recognized as valid CSS, and your animation will not display. Always ensure that your CSS is wrapped in tags when adding it to the Preloader widget to avoid this issue.

Last reviewed: April 11, 2026

Related Docs