Loading/Timer circular UI

Hello, I’m interested in developing a circular UI for a timer, similar to what I’ve seen in a particular video. Despite searching through various resources, including Google and BabylonJS playgrounds, I haven’t found any examples that match what I’m looking for. Could you provide guidance or examples on how to create a circular loading/timer UI in BabylonJS?

Given that loading progress bars and spinners often need to be displayed before and while a 3D scene is loading, it’s often better to do this sort of thing in a HTML & CSS overlay, then hide the loading overlay when fully loaded, to reveal the 3D scene underneath.

You could do this sort of spinner using a dynamic Babylon.js mesh or shader, but you’d still need to load the large JS bundle first.

See the following for how to create a custom loading screen:
https://doc.babylonjs.com/features/featuresDeepDive/scene/customLoadingScreen

1 Like

Thank you, @inteja, for the suggestions.
However, I’m not looking to create a 3D scene loader. Instead, I’m interested in implementing an in-game timer UI, similar to the one shown in this image

image

OK, I’d probably tackle that with a shader or node material, with properties for fraction complete, color and line width.

There’s also this PG using greased line which you could adapt:

https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased_line

2 Likes

In 3D or 2D (GUI)? :sweat_smile:

for 2D GUI

You can use the visibility property too::

You can easilty add a marker (mesh, sprite) to the end of the visible portion of the circle:

2 Likes

You can create a really cool loader circle with GreasedLine by tweaking the colors, the widths, playing with the segmentCount and adding a particle effect:

Add a second circle behind the main one:

Let’s go PBR!

If your code will run something CPU heavy on the main JS thread while the showing the loadier circle you’ll need to use an offscreen canvas and a worker to render this kind of loader circle otherwise the animation will stutter. It’s very easy to do:

https://doc.babylonjs.com/features/featuresDeepDive/scene/offscreenCanvas

4 Likes

Thank you, @roland
As you sent this is exactly what I wanted:

However, I would like to create it inside a 2D GUI, and it seems this solution is not possible to use within a 2D GUI using AdvancedDynamicTexture

You can use it obviously. Just the me what are the requirements.
Do you want to use it on a loading screen once or do you need as a component so you can place it anywhere anytime etc?

full screen loader circle with 2D GUI:

2 Likes

I want to use it inside a 2D GUI, and I also want to control the alignment like this :

circular.horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
circular.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;

image

1 Like

Position your label wherever you want. The loader circle will be drawn around the label.
You might want to fine tune the positioning and take the height and the width of the label into account to precisely position the loader circle.

    counterLabel.leftInPixels = 500
    counterLabel.topInPixels = 400
1 Like

@Reza_B
2D GUI support for this is coming here: ( if accepted & merged )

3 Likes

You just killed all my effort :smiley:

2 Likes

Yours are way cooler though! :smiley:
And amazing for people who want those in a 3D setting

2 Likes

Test PGs for your PR:

Can we control the direction somehow? Clockwise/CCW?

1 Like

You can use a negative value for arc property :+1:

1 Like

It’s not the case. One of the test PG’s uses negative values. The arc is just getting smaller CCW. Can it grow CCW?

Like this:

2 Likes

Ohh yes you’re right, i think i forgot something in the PR.
I’ll have to come back to it later or tomorrow, as i have to go right now :smile:

2 Likes