The Loader Block allows you to display a customizable loading animation, enhancing the user experience while content is loading on your site.
Block Options
Loader Setting: Configure the loader’s appearance and behavior.
- Choose Loader: Select from a variety of loader animations, each offering a unique visual effect:
- Inward Spiral: A spiral animation that narrows in towards the center, creating a smooth, swirling effect.
- Rotating Elements: Rotating geometric elements that loop in a continuous motion, giving a dynamic feel.
- Dots: A classic set of dots that appear one after the other in a looping sequence, commonly used for a simple loading effect.
- Letter: An animated letter (often “L” for loading) that shifts or changes to show the loading process.
- Eye Animation: A creative animation featuring an eye that opens and closes, symbolizing the loading process.
- Spinner: A circular spinner that rotates continuously, offering a clean, traditional loader style.
- Arcade: A pixelated, retro-style loader that mimics classic arcade game visuals, bringing a nostalgic feel.
- The Bars: Vertical bars that move up and down or fill in, commonly used for progress indication.
- Progress: A linear progress bar that fills up as the page loads, showing the percentage of the loading process.
- Wobbing: A playful, bouncing effect that makes the loader wobble back and forth.
- Infinity: A looping infinity symbol that continuously rotates, signifying an endless loading process.
- Mechanic: A mechanical animation with gears or moving parts, offering a more industrial or techy look.
- Flipping: A flipping animation, like flipping cards or elements, creating a smooth transition between states.
- Pulsing: A subtle animation where the loader pulses in and out, expanding and contracting in rhythm.
- Hypnotic: A spinning or expanding and contracting motion that creates a hypnotic, smooth effect.
- Factory: A factory-style loader, featuring moving parts like pistons or conveyor belts.
- Clones: A cloning effect where multiple elements are duplicated and appear one after another, giving a sense of multiplying.
- Clock: A clock-like animation where the hands or elements move, representing the passage of time while loading.
Color Setting: Customize the color of the loader and its background.
- Loader Background Color: Set the background color of the loader.
- Loader Color: Choose the color of the loader animation.
Loader Size: Adjust the size of the loader animation.
Page Load Time (in seconds): Set the amount of time in seconds before the loader disappears after the page has finished loading.
