Request : Please help artist-non-coding users with loading logos…

Hi,

you might take a look at this tutorial: https://www.youtube.com/watch?v=aUOlSgaPoXg

that’s an interesting idea. we need to discuss it with the team :)

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.

Hey NaxosCG,

I’m glad you made it!

Now, if you want a fade-in effect, you can use this technique. I created a blue to black fade in effect.

Step 1 – Create two logos
Inside the logo_position div, you add two HTML img elements (not divs!). The top one is the one you will see when the preloader will be at 100%. The second one is the first image you see.

You set the source of the images using “set attr”. Be careful! You will write just the title of the image (in my case homad_logo.png), it’s not the same as a div background image (url(./homad_logo.png).

Set the z-indexes as before.

Set the opacity of the first one at 0%, using “ste style” puzzle.

Step 2 – Animate the preloader

In the “setup preloader” puzzle, inside “on progress do”, you simply change the style to “opacity”.

Tadaaahhhh!

I attach a screenshot of the puzzle editor.

Hey NaxosCG,

You can create a left-to-right fill in using this simple method. In my example, I created a purple to green fill-in preloader.

Step 1 – Starting image

In the logo_position div, set style with a background image that you want.

Step 2 – Second image

Add a div inside logo_position with a background image of the second image. Set height with the same value as logo_position and width to 0px.

Step 3 – Add logic

On “setup preloader” puzzle, on “on progress do”, add a “set style” puzzle. We want to translate the “percentage” to the actual width pixels of the logo. So, we first create a “create text with” puzzle, which includes:
a) on the first slot, put a “number” puzzle (the third option) and multiply the percentage with the width pixels divided by 100. In my example, the width of the logo is 469px. So I put 4.69 in the number slot.
b) on the second slot, use “px” (not “%” as in the previous preloaders)

You are ready to go!

Hey NaxosCG,

I’ve searched for it. It seems that you need javascript knowledge to achieve this.

Yes, a preloader puzzle with two inputs (before & after) and a method input for revealing the second image is super helpful! Plus the percentage of the gif.