indeterminate Status afterloading Web Godot game on Mobile

This is a READ-ONLY snapshot of the Godot Community Forums when TwistedTwigleg was the owner, which is hosted for archival reasons only. The current Godot Community Forums can be found here.

Some links may point to external websites, including the current Godot Community Forums. These websites are not associated with TwistedTwigleg.

indeterminate Status afterloading Web Godot game on Mobile

Mydel

Hi, im testing deploy of my project on web. While opening project on mobile (mostly older devices), there is spinning wheel that means indeterminate status. Im looking for some ideas how to change this animation for progress bar (i know that there is already one). Or how to reduce the time it shows. Not mentioning earlier but this spinning wheel shows after progress bar is full.

Here is my testing project if you want to check it on your device: https://godottest2.pages.dev/

Image of the wheel:

cybereality

You don't have to use the example HTML/CSS files. Or you can use them as a base, and customize. The javascript code has some needed functions, but you can also write it all from scratch. Those loading images are in the HTML.

Mydel

cybereality Is there any example on how to replace this rotating wheel with progress bar?

cybereality

The graphic animation is in the HTML as CSS code. You can see it here. You'd need to customize it to be something else, but that is just general CSS, nothing to do with Godot.

		#status-indeterminate {
			height: 42px;
			visibility: visible;
			position: relative;
		}

		#status-indeterminate > div {
			width: 4.5px;
			height: 0;
			border-style: solid;
			border-width: 9px 3px 0 3px;
			border-color: #2b2b2b transparent transparent transparent;
			transform-origin: center 21px;
			position: absolute;
		}

		#status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
		#status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
		#status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
		#status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
		#status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
		#status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
		#status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
		#status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }

cybereality

If you want something simple, open the index.html file and make these changes.

Replace the animateStatusIndeterminate function with this:

function animateStatusIndeterminate(ms) {
    var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 10);
    statusProgressInner.style["margin-left"] = (i * 9) + "%";
}

Change these lines in setStatusMode(mode):

case 'progress':
    statusProgressInner.style["margin-left"] = 0;
    statusProgress.style.display = 'block';
    break;
case 'indeterminate':
    statusProgressInner.style.width = "20%";
    statusProgress.style.display = 'block';
    animationCallbacks.push(animateStatusIndeterminate);
    break;

Change this line at the end of the script (onProgress):

setTimeout(() => {
    statusProgressInner.style.transition = "0s";
    setStatusMode('indeterminate');
}, 500);

Mydel

cybereality Thats looks great, but on this progress bar i cant see the "progress". Im wondering if there is a method to check how long it will load, or what is happening during this screen.
Is it written somewhere what happens during loading (like reading the wasm and loading the graphics) and also why is this screen even showing on mobile?

cybereality

There is no progress. That's why it's an indeterminate state. The app doesn't know how long it will take, or if it will even ever finish. Though it should not stay on this screen for more than like a second or two, unless you did something wrong.