We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

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

Home Forums Bug Reports and Feature Requests Request : Please help artist-non-coding users with loading logos…

Viewing 5 posts - 31 through 35 (of 35 total)
  • Author
    Posts
  • #36535
    Avatardoehlma
    Customer

    Hello Yuri,

    any statement from your team to the ideas on top ?? :scratch:

    Best regards,
    doehlma

    #38909
    Avatartsvetan
    Participant

    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.

    Hi, thanks a lot for sharing this. I tried to make it but I have a little bug. My div “logo_progress_bar” is showing below the image. I did exactly the same steps as you (except some color changes, but that shouldn’t make any difference). I don’t know where my mistake is and I would be very grateful if you can help me :)

    Attachments:
    You must be logged in to view attached files.
    #38913

    Hello tsvetan,

    Do these 3 things:
    1) Set the z-index of the logo_transparent div to 1.
    2) Set the z-index of the logo_progress_bar div to auto.
    3) Add a set-style puzzle to logo_transparent div, and set position to absolute.

    Let me know if this works.

    #38924
    Avatartsvetan
    Participant

    Hello tsvetan,

    Do these 3 things:
    1) Set the z-index of the logo_transparent div to 1.
    2) Set the z-index of the logo_progress_bar div to auto.
    3) Add a set-style puzzle to logo_transparent div, and set position to absolute.

    Let me know if this works.

    Hi,

    I didn’t try your solution, because I managed to fix it somehow :D . I set the position of the logo transparent to “absolute” and that made it work.

    I guess the problem has to be something with the position’s style limiting the element’s z-index. I found some explanation here

    Anyways, thanks a lot everything you’ve shared! If I didn’t find your comments for this, I wouldn’t make it so far. :good:

    #38933

    You’re welcome tsvetan!

    I’m glad you made it!

Viewing 5 posts - 31 through 35 (of 35 total)
  • You must be logged in to reply to this topic.