In this tutorial you are going to learn how to add a video preloader to your website.
There are some advantages to using a video as a preloader, first and foremost of which is that you have complete design freedom, and can create something that will look amazing.
The inconvenient is that video files are large, so you will need to be very careful with this. Keep the video as short as possible, and compress it very well.
Another thing to consider is that on mobile, videos won't autoplay reliably. Don't worry though, I coded in a way to detect if the video is able to play, and if not, it will show your fallback SVG or GIF.
See it here: (click the little reload icon on the top right)
Features:
- Have the video of your choice be a preloader
- Have a GIF or SVG instead when video playback fails on mobile
- Plays when the browser has focus (the animation won't play out if opened in a background tab, for example)
- Play only once per visit (optional)
- Remove the scroll bar while the video is playing for better immersion (optional)
- Customizable exit animation (in the demo, it's a clip path going up)
Let's get started!
First, add this code to your project
This is a premium tutorial. Purchase access to unlock the full tutorial.
2 Responses
Hi, love this!! is there a way to only let the preloader play on desktop screens? I don't want there to a pre-loader on mobile & tablet.
Hey Alistair!
Glad you are enjoying it!
To remove it for mobile and tablet, add this CSS:
@media (max-width:1024px) { .videoPreloader_wrapper.videoPreloader_wrapper { display: none; } }Add it in the Code Snippet, directly before the closing </style> tag.
Cheers!