Progress loading customization #951
Comments
|
Thanks for the question. At this time, the only allowed customizations are coming from a custom index.html that you can specify in your app. Adding something else would require changes to the bootstrapper to provide separate hooks to make your own loading. Note that there's an issue in the runtime that makes load progress reporting "jitter" (dotnet/runtime#93941 (comment)). |
|
Any downsides, if I reference the uno-bootstrap.js not as module? I would like to implement the index.html like this: <html>
<head>
...
<script src="./uno-bootstrap.js"></script>
...
</head>
<body>
<div id="uno-body" class="container-fluid uno-body">
<div class="uno-loader"
...>
...
<progress></progress>
<span class="progress-text" id="progressText"></span>
...
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', () => {
// Check if the Bootstrapper class exists
if (Uno?.WebAssembly?.Bootstrap?.Bootstrapper) {
const OriginalBootstrapper = Uno.WebAssembly.Bootstrap.Bootstrapper;
// Save original method references
const originalReportAssembly = OriginalBootstrapper.prototype.reportAssemblyLoading;
OriginalBootstrapper.prototype.reportAssemblyLoading = function (adding) {
originalReportAssembly.call(this, adding);
const total = this.progress?.value || 0;
const max = this.progress?.max || 0;
// Format the numbers in a readable format with commas for thousands and periods for decimals
const formatter = new Intl.NumberFormat('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const totalFormatted = formatter.format(total / 1024); // Total in kB
const maxFormatted = formatter.format(max / 1024); // Max in kB
// Update the progress text
document.getElementById('progressText').innerText = `Downloading: ${totalFormatted} kB / ${maxFormatted} kB`;
};
console.log("Bootstrapper methods successfully overridden.");
} else {
console.warn("Bootstrapper not found!");
}
});
</script>
</body>
</html> |
# for free
to join this conversation on GitHub.
Already have an account?
# to comment
I would like to customize the whole Splashscreen layout.
But I have problems with the progressbar. The progressbar is very subtle.
Can i somehow show the percentage of the progress and, maybe, show it more in the center of the screen?
As I understand the progress is filled with data from the uno-bootstrap.js.
Can I overwrite parts from it (e.g. initProgress)? If so, how can I do this?
Originally posted by @AuderixDev in #950
The text was updated successfully, but these errors were encountered: