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.
❗Important: Navigation via loader only works in live flow and not the preview.
Update the Content
After clicking on a building block, you’ll find the Content section on the right. This is where you add and edit the visual. You can select between the following:
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. Learn more about Lottie Files here.
Change the Settings
After clicking on a building block, you’ll find the Settings section on the right. This is where you can customize the block’s style, appearance, and behavior to tailor it perfectly to your flow.
General
In the General settings, you can define if the animation is disabled set the wait time in seconds for automatic redirection.
Navigation
Under Navigation you can select where the user is redirected after the loader animation:
Next page: Go to next page in order
Go to page: Choose a specific page
Conditional Logic: Each option goes to a specific page
Redirect: Navigate to another webpage
Close Modal: If you have embedded your heyflow as a popup, you can close it with this action
Appearance
Set the block’s visibility to show only on mobile, desktop, or hide it completely. Additionally, you can select a background color for the block.
Spacing
Control the block’s layout by setting the block's padding from the top, bottom, left, and right.
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 or other tools like Jitter) 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”.