UI widget used to indicate progress to user.
The loading script tag the loading screen is waiting on.
The script is assumed to have been set to async.
This method has no way of checking whether a script element has already been loaded. If the script element passed to this method fired the load event before you passed it to this method, then the loading screen will never end.
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="module" src="./LoadLoadingScreen.js"></script>
<!--
Note that the app initialization script is later in the
document order than the loading screen and
has the async propert set.
-->
<script id="mainScript" type="module" src="./main.js" async></script>
</body>
</html>
//LoadLoadingScreen.ts -> LoadLoadingScreen.js after compiling.
//Import the modules we need.
import { LoadingScreen, awaitScriptLoad } from "@crow281/light-loading-screen";
//Create the new loading screen.
const loadingScreen = new LoadingScreen();
//Fetch the script element used to load the app.
//Since this tag has async on it, the browser won't wait for it to load,
//and since it is after LoadLoadingScreen in the document,
//LoadLoadingScreen will be called first.
const mainScript = document.getElementById("mainScript");
//Activate loading screen and make it wait till
//mainScript fires the load or error event.
awaitScriptLoad(loadingScreen, mainScript);
Intended for initializing an overall web application.
Sets the loading screen to animate until the given script element triggers the load event.
If the script element fires the load event, the loading screen will then remove itself.
If the script element fires the error event, it will display the error message and a try again button. The try again button will simply reload the page by calling window.location.reload.