Features Preloader Feature Documentation Estimated reading: 4 minutes 56 views Make your website’s loading screen look better and more interesting with AAE Preloader Extensions. It works perfectly with Elementor, letting you add fun and smooth loading animations that keep visitors watching while your page finishes loading. Requirement Elementor (Page Builder) Animations Addons (Our Plugin) Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. Step 1: Select Preloader Type First, open any page in Edit with Elementor mode. Then, click the ‘Site Settings’ icon located at the top-left corner of the screen, marked with a red highlight in the image. Once clicked, select ‘AAE Preloader’ to get started. Preloader Toggle the Pre-Loader option to ‘Show’ to reveal the layout settings. 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. For example, here, Square Spanning 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 Choose any color you want for your background. For example, here it is set to red, but you can pick any color you like. Primary Color You can choose any color you like. For example, no color is set here, but you can pick one based on your preference. Secondary Color Similarly to the primary color, you can also choose a secondary color. However, no color is set here yet. Once you’ve selected all the colors you want, simply click on ‘Save Changes’. Next, click on ‘Save Changes’ and close the settings. After that, click ‘Preview’ to check how it looks. Final Result You Did It You’ve successfully set up your preloader with AAE 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.
