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

Leave a Reply

Your email address will not be published. Required fields are marked *

2 replies on “How to create Preloader for Verge 3d in 5 minutes (just a little coding)”

  • August 25, 2021 at 8:19 am

    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. :/

  • August 25, 2021 at 4:48 pm

    Sure contact me on gmail harisimran1012@gmail.com