---
title: "How to Add Custom CSS Preloader Animations in WordPress?"
url: https://nexterwp.com/docs/custom-css-preloader-animations-in-wordpress/
date: 2023-04-10
modified: 2026-04-15
author: "Aditya Sharma"
description: "Custom CSS preloader animations are a great way to add unique and engaging loading experiences to your WordPress website. By using CSS code, you can customize the look and feel..."
image: https://nexterwp.com/wp-content/uploads/2024/05/custom-css-preloader-animations-in-wordpress-1024x519.jpg
word_count: 295
---

# How to Add Custom CSS Preloader Animations in WordPress?

## Key Takeaways

- Nexter Blocks Preloader block lets a WordPress site use a custom CSS loading animation as a preloader.
- Pre Loader tab includes a repeater item under Layers, where the user selects Custom Code from the Select Type dropdown and pastes CSS in the Code field.
- CSSloaders provides an example animation, with HTML and CSS copied from a popup and the CSS wrapped in tags before pasting the HTML into the Preloader block.

Custom CSS preloader animations are a great way to add unique and engaging loading experiences to your WordPress website. By using CSS code, you can customize the look and feel of your preloader animation to match your website's branding and style.

With the Preloader block from the Nexter Blocks, you can easily use your custom CSS loading animation as a preloader.

*To check the complete feature overview documentation of the Nexter Blocks* Preloader block, [click here](/docs/preloader-block-settings-overview/).

***Requirement - This block is a part of the Nexter Blocks*, make sure its installed & activated to enjoy all its powers.**

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-preloader-animation-and-page-transitions/)

To do this, add the Preloader block on the page or template, in the **Pre Loader** tab, you’ll find a repeater item under **Layers**.

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

In the **Code** field, add your CSS Preloader code.

![](https://nexterwp.com/wp-content/uploads/2023/04/preloader-type-custom-code-new.png)

Now 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](https://cssloaders.github.io/), [Loading.io](https://loading.io/css/) etc.

For example, we’ll use a CSS loading animation from the [CSSloaders](https://cssloaders.github.io/).

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 block add <style> </style> tag and paste the CSS in between the tag.

Like this -

`<style>

Your CSS Code…

</style>`

Then go back to the CSSloaders site and copy the HTML and paste it in the Preloader block.

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

So this is how you can use custom CSS code as loading animation.

Also, check [How to Add Lottie File Preloader Animation in WordPress](https://nexterwp.com/docs/lottie-file-preloader-animation-in-wordpress/).