The Loader Block helps create a seamless experience for your users by visually indicating that their input is being processed. This not only reassures them that something is happening in the background but also enhances the perceived value of your service.

A well-placed loader can make your flow feel more dynamic, reinforce the sense of personalization, and even boost conversion rates. Whether you're simulating a complex calculation or simply creating a smoother transition between steps, the Loader Block keeps users engaged and focused.

Adding the Loader block

In the blocks tab, navigate to “Navigation” and drag the Loader block into your heyflow
Adjust the settings such as wait time and navigation as needed
Upload a custom loader animation or a Lottie file
Just publish your heyflow and you’re good to go!

Loader animations

Default Loader Animation

The default loader animation is always the primary color, it can’t be changed individually - you have to change primary color or use Custom CSS.

Custom Loader Animation

You can also add your own animation visual. Simply upload e.g. a GIF in the loader block. We recommend uploading a GIF with an infinite loop. Upload a new image or choose from your image library.

Lottie Files

You also have the option of uploading Lottie files to your Loader Block. This gives you the opportunity to personalize your Heyflow even more and make it more exciting with more complex animations.

LottieFiles (available at lottie.com) is a platform for animated vector graphics in its own Lottie format. Lottie is a lightweight, cross-platform animation format that requires significantly less memory and therefore has a very high performance.

How to use Lottie

1. Register and log in to LottieFiles

Go to lottiefiles.com/en and click on "Log in" at the top right. Then select "Register" to create a new account. Register with your Google Account or confirm the registration by e-mail and log in with your access data.

2. Select animation

Use the search bar or browse through the categories. Click on an animation to go to the detailed view. Look for the color icon or the "Customizable" note to check whether colors can be changed.

💡 Tip: Explore the different categories available on Lottie, such as loading animations, progress indicators or arrows.

3. Adjust colors

In the detail view, you will find a "Color palette" or "Edit Colors" option (if available). Adjust colors as desired - either by manually entering the color values or by selecting colors. The preview updates automatically.

🔎 Not all animations can be customized. In this case, no color option is displayed.

4. Download animation

Click on "Download" and select Lottie as the format. The file will be generated immediately and is ready for download.

5. Upload it in your loader

To upload your Lottie file, go to your Heyflow Loader-block settings. Then, under the "Appearance" tab, click "Upload" next to "Custom visuals”.

Edit Options

General

Disabled: While editing, disable the post-animation action.
Wait time in seconds: Insert your desired wait time in seconds until the user is automatically redirected elsewhere.
Navigation: Designate where the user is redirected after the loader animation.

Spacing

Top, Bottom, Left and Right: You can use these options to set the distance to all sides. To do this, either use the slider or specify the exact number of pixels.

Appearance

Visibility: Here you can select whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.
Background colour: You can select a colour to be used as the background for the block.
Custom visual: Upload your own, custom animation.