Creating custom preloaders

Learn how to build an animated preloader that disappears once your page has loaded using stacked images, timed Entrance animations and a small amount of code. Follow along to design the loading screen, sequence your fades, then slide it away to reveal your page with a smooth, polished transition.

Keep site visitors engaged by turning loading time into a branded experience with a custom preloader that feels modern and intentional.

In this Studio Byte episode, you'll learn how to stack a series of vertical and horizontal images and time quick Entrance animations so they fade in one by one. Then, add a short code snippet using Wix Animations to slide the preloader up and off‑screen once the page has loaded, revealing your homepage content beneath.

The result is a custom preloader that gives site visitors a cohesive, more cinematic first impression.

Here's the code you need:

import { timeline } from "wix-animations-frontend";


const explore = timeline().add($w('#box2'), {
       duration: 500,
       easing: "easeInQuad",
       y: -900,
       delay: 1600
   })


$w.onReady(function () {
   explore.play()
})