# Loading/Timer circular UI **URL:** \ **Category:** Questions\ **Tags:** gui\ **Created:** [June 16, 2024, 6:36am UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364 "2024-06-16T06:36:25Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Reza\_B](https://avatars.discourse-cdn.com/v4/letter/r/ce7236/32.png) [@Reza\_B](https://forum.babylonjs.com/u/Reza_B)\ **Post date:** [June 16, 2024, 6:36am UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/1 "2024-06-16T06:36:25Z")
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? > **[Babylon.js Playground](https://playground.babylonjs.com/#W1E0CH)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\ **Post date:** [June 16, 2024, 6:50am UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/2 "2024-06-16T06:50:06Z")
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. - [GitHub - n3r4zzurr0/svg-spinners: A collection of 24 x 24 dp SVG spinners! (CSS & SMIL)](https://github.com/n3r4zzurr0/svg-spinners) 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](https://doc.babylonjs.com/features/featuresDeepDive/scene/customLoadingScreen) ---
**Author:** ![Reza\_B](https://avatars.discourse-cdn.com/v4/letter/r/ce7236/32.png) [@Reza\_B](https://forum.babylonjs.com/u/Reza_B)\ **Post date:** [June 16, 2024, 6:56am UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/3 "2024-06-16T06:56:14Z")
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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/6/e6c987ac27de4c122838c65112691c2f115a0885.png) ---
**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\ **Post date:** [June 16, 2024, 7:13am UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/4 "2024-06-16T07:13:42Z")
OK, I’d probably tackle that with a shader or node material, with properties for fraction complete, color and line width. ---
**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\ **Post date:** [June 16, 2024, 7:17am UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/5 "2024-06-16T07:17:01Z")
There’s also this PG using greased line which you could adapt: > **[Babylon.js Playground](https://playground.babylonjs.com/#H1LRZ3%23233)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes [https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased\_line](https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased_line) ---
**Author:** ![aWeirdo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aweirdo/32/52_2.png) [@aWeirdo](https://forum.babylonjs.com/u/aWeirdo)\ **Post date:** [June 16, 2024, 8:32am UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/6 "2024-06-16T08:32:10Z")
In 3D or 2D (GUI)? 😅 ---
**Author:** ![Reza\_B](https://avatars.discourse-cdn.com/v4/letter/r/ce7236/32.png) [@Reza\_B](https://forum.babylonjs.com/u/Reza_B)\ **Post date:** [June 16, 2024, 8:35am UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/7 "2024-06-16T08:35:55Z")
for 2D GUI ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [June 16, 2024, 12:15pm UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/8 "2024-06-16T12:15:54Z")
You can use the `visibility` property too:: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/a/ca564a6ee7b7d5df54cd3aaae4d2ca706f6ff9cb.jpeg) > **[Babylon.js Playground](https://playground.babylonjs.com/#QSQZ0E)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes You can easilty add a marker (mesh, sprite) to the end of the visible portion of the circle: > **[Babylon.js Playground](https://playground.babylonjs.com/#QSQZ0E%231)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [June 16, 2024, 12:59pm UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/9 "2024-06-16T12:59:02Z")
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: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/1/81e7b3a18ea82abfd9099c0678747e6cb597a3ed.jpeg) Add a second circle behind the main one: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/4/549f7400ecc756d8c1b805b6aea07ac2d3a31437.jpeg) > **[Babylon.js Playground](https://playground.babylonjs.com/#QSQZ0E%233)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Let’s go PBR! ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/7/87c91ad486b33ab1b1b421834fa0779857f344c5.jpeg) > **[Babylon.js Playground](https://playground.babylonjs.com/#QSQZ0E%234)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes 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](https://doc.babylonjs.com/features/featuresDeepDive/scene/offscreenCanvas) ---
**Author:** ![Reza\_B](https://avatars.discourse-cdn.com/v4/letter/r/ce7236/32.png) [@Reza\_B](https://forum.babylonjs.com/u/Reza_B)\ **Post date:** [June 16, 2024, 7:22pm UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/10 "2024-06-16T19:22:33Z")
Thank you, @roland As you sent this is exactly what I wanted: > **[Babylon.js Playground](https://playground.babylonjs.com/#QSQZ0E)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes 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 ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [June 16, 2024, 7:41pm UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/11 "2024-06-16T19:41:16Z")
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: > **[Babylon.js Playground](https://playground.babylonjs.com/#QSQZ0E%238)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![Reza\_B](https://avatars.discourse-cdn.com/v4/letter/r/ce7236/32.png) [@Reza\_B](https://forum.babylonjs.com/u/Reza_B)\ **Post date:** [June 16, 2024, 7:55pm UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/12 "2024-06-16T19:55:09Z")
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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/8/0819237071ff398e599433d50d9b773869c65431.png) ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [June 16, 2024, 10:35pm UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/13 "2024-06-16T22:35:48Z")
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. ```auto counterLabel.leftInPixels = 500 counterLabel.topInPixels = 400 ``` > **[Babylon.js Playground](https://playground.babylonjs.com/#QSQZ0E%2313)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![aWeirdo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aweirdo/32/52_2.png) [@aWeirdo](https://forum.babylonjs.com/u/aWeirdo)\ **Post date:** [June 17, 2024, 3:38am UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/14 "2024-06-17T03:38:39Z")
@Reza_B 2D GUI support for this is coming here: ( if accepted & merged ) > > > Allow Arcing of the 2D GUI Ellipse control. > > Let's us create Semi-circles, and… opens open a wide range of new GUI design options. > It's something i've felt have been lacking for a while, with the only option being doing it through images. > > Unfortunately the starting angle(0) of context.arc() function is on the far right end of the ellipse for some reason.. > would have been great to have to start/end at the top, i think leave it to the dev to control with rotation of the control. > > Ref use-case; https://forum.babylonjs.com/t/loading-timer-circular-ui/51364 > > \*\*PG samples\*\* > Note that when a single ellipse is arced, and both filled (background) and stroked (thickness) the border/thickness is not connected/closed. > as that would require an additional property to force closePath() on context even when arcing. > https://playground.babylonjs.com/?snapshot=refs/pull/15207/merge#IC5LC6#2 ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [June 17, 2024, 3:43am UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/15 "2024-06-17T03:43:18Z")
You just killed all my effort 😃 ---
**Author:** ![aWeirdo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aweirdo/32/52_2.png) [@aWeirdo](https://forum.babylonjs.com/u/aWeirdo)\ **Post date:** [June 17, 2024, 3:48am UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/16 "2024-06-17T03:48:06Z")
Yours are way cooler though! 😃 And amazing for people who want those in a 3D setting ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [June 17, 2024, 3:55am UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/17 "2024-06-17T03:55:36Z")
Test PGs for your PR: > **[Babylon.js Playground](https://playground.babylonjs.com/?snapshot=refs%2Fpull%2F15207%2Fmerge#LQFHJU%231)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes > **[Babylon.js Playground](https://playground.babylonjs.com/?snapshot=refs%2Fpull%2F15207%2Fmerge#LQFHJU)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Can we control the direction somehow? Clockwise/CCW? ---
**Author:** ![aWeirdo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aweirdo/32/52_2.png) [@aWeirdo](https://forum.babylonjs.com/u/aWeirdo)\ **Post date:** [June 17, 2024, 3:59am UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/18 "2024-06-17T03:59:12Z")
You can use a negative value for arc property 👍 ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [June 17, 2024, 4:09am UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/19 "2024-06-17T04:09:14Z")
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: > **[Babylon.js Playground](https://playground.babylonjs.com/#QSQZ0E%2314)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![aWeirdo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aweirdo/32/52_2.png) [@aWeirdo](https://forum.babylonjs.com/u/aWeirdo)\ **Post date:** [June 17, 2024, 4:22am UTC](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364/20 "2024-06-17T04:22:52Z")
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 😄 [Next page](https://forum.babylonjs.com/t/loading-timer-circular-ui/51364.md?page=2)