In this tutorial you are going to learn how to add this nice preloader to your website, using your own images.
See it here: (click the little reload icon on the top right)
Features:
- Flash through 6 images
- Easily swap with your own images
- Checks for image load time, to play it at the ideal time for UX and Performance
- 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)
- Change the color of the lines at the end, ideally to match your page's background color
This tutorial is only recommended for users comfortable with modifying CSS. Due to the nature of the design, and all the different variations that could be made out of it, this particular tutorial comes with limited customization support & help. I will only support in cases where you can't get it working at all. I won't help with making it look this or that way, or changing the animation.
Thank you for your understanding!
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
How do I get support? As the preloader is showing only a black screen?
Hey Ben! You are at the right place for support. Please share your URL with me where you are testing this, I will have a look!
If you prefer you can also email it to me : maxime@element.how