The Preloader option allows you to display a loading animation while your website content is being prepared. UiCore Animate includes multiple preloader styles, each with its own visual effect and customization options.
The location of the Preloader settings depends on your setup:
How to enable
UiCore Pro (Theme Users)
You can find the Preloader settings under: Theme Options → Animations → Preloader
UiCore Animate Plugin (Standalone Users)
The settings are available here: WordPress Settings → UiCore Animate → Preloader
Once a preloader style is selected, you can customize its color and, depending on the preset, additional options may appear.
Preloader Types
Blobs Spinner
A minimal, modern loading indicator consisting of animated circular blobs spinning around a center point. This effect works well with clean, contemporary layouts.
Settings
- Preloader Color – Sets the color of the blobs.
Blobs Spinner & Text
This preloader combines the animated blob spinner with a customizable loading text, making it useful when you want to provide a clearer indication of page loading progress.
Settings
- Preloader Text Sets the text displayed under the spinner (e.g., “Loading”, “Please wait”, etc.).
- Preloader Color Controls the color of the animated blobs.
- Preloader Text Color Controls the color of the loading text.
Box
A minimal square-shaped preloader that animates with a simple looping motion. This effect is clean, lightweight, and works well with modern, minimal layouts.
Settings
- Preloader Color Defines the color of the animated box.
Box & Text
This preloader pairs the animated square box with customizable loading text. It offers a minimalist look while providing a clearer indication of loading status.
Settings
- Preloader Text The text displayed under the animated box (e.g., “Loading”).
- Preloader Color Sets the color of the animated box.
- Preloader Text Color Sets the color of the loading text.
Glowing Spinner
A circular spinner with a smooth glowing effect that pulses as it rotates. This preloader offers a more polished and modern look compared to the standard spinners, making it suitable for premium or visually rich designs.
Settings
- Preloader Color Sets the glow and spinner color.
Glowing Spinner & Text
This preloader combines the glowing circular spinner with a customizable loading text. It offers a polished, modern appearance while providing a clear loading message to users.
Settings
- Preloader Text The text displayed below the glowing spinner.
- Preloader Color Sets the glow and spinner color.
- Preloader Text Color Controls the color of the loading text.
Infinity
This preloader displays a continuous looping animation shaped like the infinity symbol. It provides a smooth, elegant loading effect that is visually distinctive without being distracting.
Settings
- Preloader Color Sets the color of the infinity loop animation.
Infinity & Text
This preloader displays the animated infinity loop along with a customizable loading text underneath. It adds clarity for users by pairing motion with a readable label.
Settings
- Preloader Text The text shown below the infinity animation (e.g., “Loading”).
- Preloader Color Sets the color of the infinity loop.
- Preloader Text Color Controls the color of the loading text.
Lines
The Lines preloader displays multiple vertical bars animating in sequence, creating a rhythmic loading effect. This style is clean and lightweight, making it suitable for minimal or fast-loading websites.
Settings
- Preloader Color Sets the color of all animated lines.
Lines & Text
This preloader combines the animated vertical line bars with a customizable loading text. It provides both visual activity and a clear loading message.
Settings
- Preloader Text The text displayed beneath the animated lines.
- Preloader Color Sets the color of the animated line bars.
- Preloader Text Color Controls the color of the loading text.
Liquid Box Spinner
The Liquid Box Spinner displays a rotating square with a fluid, liquid-like motion applied to its edges. This creates a smooth, organic loading animation that feels more dynamic than a standard box or spinner.
Settings
- Preloader Color Sets the color of the liquid-style animated box.
Liquid Box Spinner & Text
This preloader combines the fluid, distorted square animation of the Liquid Box Spinner with a customizable text label. It gives a more dynamic loading experience while also providing a clear status message.
Settings
- Preloader Text The text displayed beneath the animated liquid box (e.g., “Loading”).
- Preloader Color Sets the color of the animated liquid-style box.
- Preloader Text Color Controls the color of the loading text.
Simple Spinner
The Simple Spinner is a classic circular loading indicator. It rotates smoothly in a loop and provides a clean, lightweight option suitable for any type of website.
Settings
- Preloader Color Sets the color of the spinner.
Simple Spinner & Text
This preloader pairs the classic circular spinner with a customizable loading text. It offers a minimal but informative loading experience, suitable for all types of websites.
Settings
- Preloader Text The text displayed below the spinner (e.g., “Loading”).
- Preloader Color Sets the color of the spinner.
- Preloader Text Color Controls the color of the loading text.
Circle Spinner
The Circle Spinner displays a smooth rotating circle made from a continuous outline. It’s a clean, modern preloader style that works well across a wide range of website designs.
Settings
- Preloader Color Sets the color of the circular outline.
Circle Spinner & Text
This preloader combines the rotating circular outline of the Circle Spinner with a customizable loading text. It delivers a clean and minimal visual paired with an informative label.
Settings
- Preloader Text The text displayed below the spinning circle.
- Preloader Color Sets the color of the circular spinner.
- Preloader Text Color Controls the color of the loading text.
Triangle
The Triangle preloader animates a triangular shape in a continuous looping motion. This geometric loader is simple but visually distinctive, making it a good fit for modern or minimal designs.
Settings
- Preloader Color Sets the color of the animated triangle.
Triangle & Text
This preloader pairs the animated triangular shape with a customizable text label, giving users both a visual and textual indication that the page is loading.
Settings
- Preloader Text The text displayed under the animated triangle.
- Preloader Color Sets the color of the triangle.
- Preloader Text Color Controls the color of the loading text.
Unfold Spinner
The Unfold Spinner is a minimal, geometric loading animation where shapes “unfold” or expand in sequence, creating a smooth and modern spinner effect. It’s designed to be subtle yet visually engaging, fitting well into clean or minimalistic website designs.
Settings
- Preloader Color Controls the color of the unfolding shapes in the spinner. Tip: Choose a contrasting color to your background for best visibility.
Unfold Spinner & Text
The Unfold Spinner & Text preset combines the geometric unfolding animation with a customizable loading message. This makes it useful when you want both a visual indicator and a clear status message for your visitors.
Settings
- Preloader Text Allows you to add your own loading message (e.g., Loading, Please wait, Preparing content, etc.).
- Preloader Color Controls the color of the unfolding animation shapes. Choose a color that stands out against your background.
- Preloader Text Color Sets the color of the text displayed beneath the spinner.
Simple Counter
The Simple Counter preloader displays a clean, minimal percentage counter that increases as the page loads. It’s perfect when you want a straightforward, text-based loading indicator without animation elements.
Settings
- Preloader Color Controls the color of the counter text. Choose a color that contrasts well with your background for maximum readability.
Big Counter
The Big Counter preloader is a bold, visually impactful loading indicator that displays a large, numeric percentage as the page loads.
It’s ideal when you want the loading process to be clear, prominent, and visually engaging.
Settings
- Preloader Color Adjusts the color of the counter text. Choose a color that contrasts with the background to maintain readability.
Intro Words
The Intro Words preloader displays a sequence of words or short phrases, one after another, creating a dynamic intro-style loading animation.
It’s ideal for creative websites, branding-heavy projects, or pages where you want to communicate multiple messages before the content appears.
Settings
- Preloader Color Controls the color of the displayed words. Choose a color that matches your brand or contrasts with the page background.
- Preloader Intro Words This field controls the actual text that will appear during the animation.
Note: Use the “|” (pipe) character to separate each word or phrase.
Preloaders can also be combined with any Page Transition effect to get a more dynamic experience.
