Establish a personalized loader in Webflow

A loading indicator — or occasionally referred to as a loading screen — is the graphical element that greets you on certain websites prior to the primary content of the web page being fully loaded.

Loading indicators can assume a variety of forms! They can range from straightforward designs to elaborate animations. Their primary objective is to engage site visitors while the actual content of the page is being loaded behind the scenes.

There may exist differing opinions on the necessity of employing a loading indicator, nonetheless, given your presence on this page, we infer that you desire to grasp the process of crafting one in Webflow. In this instructional session, we will elucidate how to fabricate a loading indicator and two loading animations using interactions: one being the most elementary loader and the other an animated loader.

Fabricating a loading indicator

1. Designing the loading indicator
2. Formulating a loader
3. Establishing the initial state of the loading indicator
4. Concealing the loading indicator upon page completion

Prior to initiating

In order to generate this loading indicator, you will need:

• Div blocks
• A text block
• Flexbox
• Fixed position
• Z-index
• Background styles
• Display settings
• Width and height dimensions
• Border radius
• Triggers and animations

If any of these components or properties are unfamiliar to you, we recommend perusing their guidelines and comprehending the usage of these tools before commencing with this tutorial.

Designing the loading indicator

The loading indicator comprises the central loading container and a loader. To craft the primary container of the loading indicator:

1. Drag a div block from the add panel directly onto the page body. Assign a class and label it as “loading-indicator”.
2. Activate flexbox. Align and justify its children to the center.
3. Modulate the positioning — designate the position as fixed. Make sure to designate it as full in order to occupy the entire viewport. Establish the z-index to a notably high number such as 99999. This ensures it remains atop all other elements.
4. Assign a background color

Formulating a loader

To fabricate the simplest loader, simply insert a text block. Double-click on it and input “loading…”. That concludes the fundamental design.

Insider tip

Within your loading indicator container, you are at liberty to integrate various elements or assets — ranging from animated gifs to videos featuring animated loaders, or Lottie animations.

If you opt for gifs or videos, ensure they are not excessively large. It is imperative that the loading time of the preloader does not surpass that of your website. On the contrary, Lottie JSON animation files are compact in size and exceedingly versatile. Following their upload to Webflow, they are rendered as SVG animations. SVG files exhibit superior scalability compared to other formats without compromising quality, thereby rendering seamlessly across varied resolutions.

If you incorporate animated loaders (like gifs or videos), ensure they do not exceed an appropriate size. You do not want the loading time of the preloader to overshadow that of your site.

Formulating an animated loader – the bouncing ball

It is also viable to devise animated loaders using Webflow Interactions. Illustrated below is how we conceived this bouncing ball loader.

1. Construct a sphere using a div block. Define a width and height of 30x30px, fill in the background color, and apply a 50% radius.
2. Initiate a page load trigger within the interactions panel. Draft a novel animation for the commencement of page loading.
3. On the canvas, select the sphere and append a variety of animation actions. Here is how it has been configured:

• Action 1 — Propel the sphere upwards by specifying the y-axis, Y = -100 — mark this as the initial state
• Action 2 — Return the sphere to Y=0 — duration 0.5 — easing = bounce
• Action 3 — Ascend the sphere back to Y = -100 — duration 1 — easing = in out cubic

4. Conclude the animation and configure it to loop

Establishing the initial state of the loading indicator

Subsequent to crafting the loading indicator, you are equipped to conceal it, enabling you to manage your other page elements sans the loading indicator obscuring everything. Thus, select the loading indicator and modify the display setting to none.

Crafting the interaction

1. Ensure the loading indicator div block remains selected
2. Navigate to the interactions panel and introduce a page trigger: page load. Thereafter, commence a fresh animation upon completion of page loading.
3. Formulate a new timed animation at this juncture and assign it a title.

Establishing the initial state

4. Incorporate a new timed action of hide/show. Subsequently, restore the display setting to flex. This renders it visible once more.
5. Designate this action as the initial state.

Concealing the loading indicator once the page loads

The initial state determines the initial appearance when the page is first displayed. To ensure the disappearance of your loading indicator once the page completes loading:

1. Integrate a fresh timed action that sets the opacity to 0%. Adjust the duration if you desire a swifter animation.
2. Designate the display setting as none. This conceals the loading indicator after it fades out (opacity reaches 0%).

Insider tip

If you wish to guarantee the loading indicator remains visible for a specified duration (minimum), select the initial action (the opacity alteration) and delay it to activate post, for instance, half a second. This implies that even post page loading, it will persist for half a second before commencing to vanish.

That concludes the setup of a loading animation!