Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.

Question Add a preloader in Unity loading screen

Discussion in 'Web' started by saifshk17, Apr 3, 2023.

  1. saifshk17


    Dec 4, 2016

    I would like to add a percentage of loading (100%) in text in Unity's WebGL loading screen.
    I am not sure how to add this inside of js file of Unity. Can someone guide me?
    Last edited: Apr 3, 2023
  2. gtk2k


    Aug 13, 2014
    One way is to use custom WebGLTemplates.
    Depending on the installation destination, the default is
    In such a path, you will find the WebGLTemplates folder provided by Unity.
    Copy this WebGLTemplates folder into the Assets folder of the project, delete the folders other than the Default folder in the copied WebGLTemplates folder, and rename the Default folder to, for example, "Custom".
    Open Player Settings in the Unity Editor, and in "Resolution and Presentation", you will find "WebGL Template" and add a "Custom" Template there.
    Inside the Custom folder are other related files, including index.html, look at the contents of index.html.
    Code (CSharp):
    1. createUnityInstance(canvas, config, (progress) => {
    I think there is a line that says
    The argument progress of this callback function is the read percentage, which is a value between 0.0 and 1.0.
    Add an element in index.html to display the percentage and set the percentage to the textContent of that element in this callback function.
    After that, if you select "Custom" for "WebGL Template" in "Resolution and Presentation" and build, you can display the percentage when loading.