Hello, I am Haris and back with another tutorial in this tutorial I will tell you how you can create a Preloader for Verge 3d in 5 minutes, the created preloader will be fully responsive for every device.
1-Lottie-files
For creating a preloader I am going to use ready-made SVG animation from Lottie files that use a new format that is light-weight almost every animation is less than 70kb which is faster to load. You will find hundreds of loop loading animations for free.
Let’s choose a Lottie animation, I am using this one, you can choose whatever you want
After choosing the loader animation, from Use this animation in click on <html>
In the Editor add background color if needed because in my case loader is transparent that’s why I added background color, you can also change the loader width, height but this default size is best and make sure to uncheck the controls and after that copy the code
2-HTML and CSS
Now create two files index.html and styles.css you can use Microsoft Visual Studio code or notepad. After Creating these two files, use these codes in your HTML and CSS
Copy all this HTML code and paste it into the index.html file
Copy all this CSS code and paste it into the styles.css file
Copy these two index.html and styles.css files and paste in your project
In Verge 3d puzzles, from initialization tab add setup preloader puzzle, and after that from HTML tab add set style puzzle and drag it in setup preloader puzzle inside on finish do, change set style align -content to display, add text and write none and paste it next to display, add another text and paste it next to elem and change the text to preloader-wrapper and now check the parent doc, now you are ready to go.
Congratulations! if you create your preloader
Check myPatreon page to get access to all my assets created for Verge 3d
I am WebGL and verge 3d developer, i love to share my knowledge and experience with other people
2 replies on “How to create Preloader for Verge 3d in 5 minutes (just a little coding)”
Hey! Could you help me out in this? I did exactly the way you mentioned but it seems the loader keeps loading and my project itself doesn't load. :/
Sure contact me on gmail harisimran1012@gmail.com