vassilisstergioudis

Hey NaxosCG,

I just created a preloader using puzzles. This is the outcome:
https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:c9c6080f41/applications/Homad_Simone/Homad_Simone.html

Here is how I created it:

Step 1 – Create white canvas
In the “init” puzzles tab, you create an HTML div (I called it preloader_div) that captures the whole page. That’s why the width and height are set to 100%. Also set the position to static and the background color to #ffffff. That’s white. Last, set display to flex. This will help us in the next step.

Step 2 – Create logo position
Add another HTML div inside the previous div. I call it logo_position. Set width and height to the exact pixels of the logo. Position to static and margin to auto. This helps us to set the logo in the center of the canvas (it’s only used when the parent div display is set to flex).

Step 3 – Create tranparent logo

Step 3a (outside puzzles)- We are not going to use the logo itself, but an inverted cut-out of the logo. Using photoshop, I created a solid white layer with the logo cut-out of it. Under this layer, I put a solid black layer with 20% fill. Save it as a png file. I call it company_logo_transparent.png.

Step3b – Create another div, I call it logo_transparent inside the logo_position div. Set the same width and height, using background image the company_logo_transparent.png. Set z-index to 3.

Step 4 – Create progress bar
Create a div inside logo_position, I call it progress_bar. Set position to relative, width to 0%, height to 100%, background colour to #000000 (this is black) and z-index to 2. This means that this div is located behind the previous one. We are going to reveal it in the next step.

Step 5 – Add the logic behind the preloader
In this step we are going to animate the progress bar from 0% to 100% using the percentage of the preloader. Add a setup preloader puzzle. On “on progress do”, add a puzzle “set style” to the logo_progress_bar div. Create a text list with percentage on top and a text using “%” as input. This tells the software to get the percentage of the preloader and set it as width output in the progress bar.

Step 6 – Hide the preloader
Last but not least, on “on finish do”, add a “set style” puzzle to the initial white canvas, called preloader_div, and set display to “none”.

I hope this helps. I attach a screenshot of the puzzles and a screenshot of the logo creation.

Please let me know if you manage to do this.