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!
![[video-to-gif output image]](https://heyflow.intercom-attachments-1.com/i/o/847418436/eab2711cd6e9d604da12f4f6/ezgif-3-71efce443f.gif?expires=1746075600&signature=c9790f2a867963756f7ddaa67c455f4ad445fa396cc4a077806d791c328e00f1&req=fCQgEsh2mYJZFb4f3HP0gMp78z8lNFHCeBlWkBqeZ2I%2FYql%2FrZdWilXE4%2BGn%0AfMhEA5OcnGTpYSZnYQ%3D%3D%0A)
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
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
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
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.