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.

Q; preloader & UI webpage

Home Forums Programming Q; preloader & UI webpage

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #29894


    I created a basic html page, that loads the project file in a iframe as in numerous examples from verge3D.
    As in the examples, I also have some HTML code that sets the preloader image & loader bar.
    My tweaks on the logo & loader bar colors are all in the project .css file, and is working fine. This according to the Çustomizing Preloader’ section in the documentation.

    What I don’t seem to get working this way, is how te hide the UI buttons etc. at start. When I load the index.html, I see the loader -and- the UI buttons etc. at the same time, before the project page is loaded.

    It’s very distracting, and I looked at the examples html/code & puzzles, but cannot figure it out for now. In the examples there’s a distinct separation between the two pages while loading.

    cheers for any replies,


    Below sea level: 52.2 Lat, 4.4 Long


    If you need your elements to be hidden, simply hide them with CSS and then unhide upon your app loaded.

    Verge3D’s Tech Chief
    FB | Twitter | VK


    Hello robwu01,

    can you please tell me how and with which program you created your individual

    preloader image & loader bar ?


    Want to bump this because I came across this issue as well.

    How is this achieved via puzzles? Can this be done inside Verge 3D?


    There’s some old tutorial on the youtube channel.

    Co-founder and lead graphics specialist at Soft8Soft.


    It’s fairly simple, if you know where to look ;)

    In the starter html page, add a display tag to the button div, so it won’t show on the initial load of the page:
    <div id="button_home" class="btn_color" style="display:none;">Home</div>

    Then create a puzzle that will ‘flip’ the ‘none’ tag to ‘block’ for the div id, on loading the webgl data.
    This can be done with the HTML ‘set style’ puzzle piece.
    set style “display” – to “block” – for elem “button_home” – in parent doc:”checked”.

    Hope this helps!


    Below sea level: 52.2 Lat, 4.4 Long

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.