Q; preloader & UI webpage

This topic has 5 replies, 5 voices, and was last updated 4 years, 6 months ago by robwu01.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
2020-07-09 at 1:48 pm #29894

robwu01
Participant

Hi,

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,

rob

Below sea level: 52.213545 Lat, 4.422061 Long

2020-07-13 at 4:45 pm #30060

Alexander Kovelenov
Staff

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

Soft8Soft Tech Chief
Want more Verge3D updates? Follow me on X, Facebook, or LinkedIn

2020-08-07 at 7:16 pm #31281

doehlma
Customer

Hello robwu01,

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

preloader image & loader bar ?

2021-06-06 at 5:20 pm #41901

Johnson
Customer

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?

2021-06-07 at 6:51 am #41914

Mikhail Luzyanin
Staff

There’s some old tutorial on the youtube channel.

Co-founder and lead graphics specialist at Soft8Soft.

2021-06-07 at 8:21 am #41917

robwu01
Participant

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.
So:
set style “display” – to “block” – for elem “button_home” – in parent doc:”checked”.

Hope this helps!

rob

Below sea level: 52.213545 Lat, 4.422061 Long
Author

Posts