Video Duration: 24 : 09
Video Overview
This video tutorial walks you through how to add a preloader and page transitions in Elementor using the Preloader widget in The Plus Addons for Elementor. You will learn how to configure smooth loading animations with images, GIFs, Lottie files, progress bars, custom code, shortcodes, and over 10 predefined animation effects.
Live Widget Demo: https://theplusaddons.com/elementor-widget/preloader-and-page-transition/
What this video covers:
Loader types: images, GIFs, icons, text, Lottie files, custom code, shortcodes, and progress bar.
Multiple preloaders on a single page.
CSS class exclusions to skip the preloader on specific elements.
Page transition animation effects that trigger when visitors navigate between pages.
What is a preloader? A preloader is a loading screen that displays while your web page content loads in the background. It keeps visitors engaged during load time by showing an animation, image, or progress indicator instead of a blank or partially loaded page. To use Lottie files as your preloader animation, see How to Add Lottie File Preloader Animation in Elementor?
Why use a preloader on your website? A preloader gives visitors a visual cue that the page is loading, so they know content is on the way rather than assuming the page is broken. This is especially useful on pages with heavy media such as video backgrounds, large image galleries, or animated sections. If you want to pair your preloader with scroll-triggered entrance effects, see How to Use GSAP Animation in Elementor?
