• Godot Help

  • indeterminate Status afterloading Web Godot game on Mobile

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:

  • 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);

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.

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

      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); }

      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);

        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?

          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.