How to Add a Preloader in Bricks Builder Using BricksFly

Preloader extension in BricksFly lets you display a loading animation before your website content appears. You can choose from different preloader layouts and customize the background, primary, and secondary colors to match your website design.

Requirement

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Preloader in BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly. 
3. Head to the Extension tab. 
4. Under Site Settings, toggle on Preloader. 

Step 1: Select Preloader Type

Click the BricksFly icon in the top left corner of the editor panel, then go to Site Settings ➜ Preloader ➜ Enable Preloader.

Once Preloader is enabled, the preloader settings will appear.

Preloader Settings

Layout settings include several available options:

Layout

• Whirlpool: It’s a spinning circle, kind of like water swirling down a drain, that keeps moving to show something is still loading.
• Floating circle: A circle that slowly moves up and down — it gives a calm and smooth loading feel.
• Eight Spinning: Choosing Eight Spinning will show a shape like the number eight that keeps spinning. It means the page is still loading.
• Double Torus: Choosing Double Torus shows two round shapes, like doughnuts, spinning in different ways. It looks like a 3D loading effect.
• Tube Tunnel: If you select Tube Tunnel, it will create a forward-moving tunnel effect that adds a sense of depth and progress.
• Speeding Wheel: Choosing a fast-spinning wheel shows a quick and lively loading motion.
• Loading: If you select Loading, you’ll see a basic animation like a simple spinning or pulsing icon that looks clean and classic.
• Dot Loading: Choosing Dot Loading will make the dots appear, bounce, or fade one by one in sequence.
• Fountain TextG: Choosing Fountain TextG makes dots bounce up like a fountain and fall, creating a gravity-like loading effect.
• Circle Loading: Circular shapes spin or pulse — a simple and common loading circle effect.
• Dot Circle Rotator: Dots placed in a circle spin around the center, like a carousel turning.
• BubblingG: Choosing BubblingG makes bubbles rise and then pop or gently grow and shrink, just like boiling water.
• Coffee: Choosing Coffee will add a fun animation that looks like a steaming cup of coffee.
• Orbit Loading: It moves elements around a center point, like planets circling a star.
• Battery: Choosing Battery shows a battery filling up slowly, like it’s charging.
• Equalizer: Bars go up and down, like the display on a music player.
• Square Spanning: Choosing Square Spanning makes squares grow or stretch out one after another, usually in a grid pattern.
• Jackhammer: Choosing Jackhammer will make the animation shake up and down fast, like a jackhammer hitting the ground.

In this example, Eight Spinning is selected.

Step 2: Customize Colors

Select any color you want for the background and main design. It helps your preloader look clean and smooth.

Background Color

Background Color option controls the background color of the preloader screen. This color appears behind the loading animation before the website content is fully loaded.

In this example, the background color is left at its default setting. You can choose any color based on your design needs.

Primary Color

Primary Color option sets the main color used in the preloader animation. This color is usually applied to the main loading shape, icon, text, or animated element.

In this example, Rosy Brown is selected. However, you can choose any color based on your design needs.

Secondary Color

Secondary Color option defines the supporting color used alongside the primary color. It helps add contrast and visual balance to the preloader animation, depending on the selected layout.

In this example, Light Grey is selected. You can choose any color based on your design needs.

Reset to Default Settings

Reset to Default Settings option restores all preloader settings to their original default values. Any custom changes you have made will be removed, so use this option only when you want to return the preloader to its default configuration.

Final Result

You Did It

You’ve successfully set up your preloader with Preloader Extensions! Now your website has a smooth and stylish loading animation that keeps visitors engaged while your page loads.

Feel free to try different preloader styles and colors anytime to match your site’s look perfectly.

Additionally,  if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.