Skip to main content
Version: Current

Loading Overlay

In the following example, we'll be rendering a Unity Application in our React Application. The Unity Application will render within a container, this allows us to overlay the containing with a loading overlay. This overlay will be visible while the Unity Application is loading.

App.jsx
import React from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

function App() {
const { unityProvider, isLoaded, loadingProgression } = useUnityContext({
loaderUrl: "build/myunityapp.loader.js",
dataUrl: "build/myunityapp.data",
frameworkUrl: "build/myunityapp.framework.js",
codeUrl: "build/myunityapp.wasm",
});

// We'll round the loading progression to a whole number to represent the
// percentage of the Unity Application that has loaded.
const loadingPercentage = Math.round(loadingProgression * 100);

return (
<div className="container">
{isLoaded === false && (
// We'll conditionally render the loading overlay if the Unity
// Application is not loaded.
<div className="loading-overlay">
<p>Loading... ({loadingPercentage}%)</p>
</div>
)}
<Unity className="unity" unityProvider={unityProvider} />
</div>
);
}