Why is the loading interface suddenly black?

  • I changed the style of the load interface,
  • But all of a sudden when I load it, it goes black and I change it
pc.script.createLoadingScreen(function (app) {
    var showSplash = function () {
        // splash wrapper
        var wrapper = document.createElement('div');
        wrapper.id = 'application-splash-wrapper';

        // splash
        var splash = document.createElement('div');
        splash.id = 'application-splash';
        splash.style.display = 'none';
        // splash.style.visibility="hidden";
        // splash.style.display = 'block';

        var logo = document.createElement('img');
        logo.src = 'https://azh5.oss-cn-shanghai.aliyuncs.com/azimgs/UI_PIC_Loading.png';
        logo.onload = function () {
            splash.style.display = 'block';

        var container = document.createElement('div');
        container.id = 'progress-bar-container';

        var bar = document.createElement('div');
        bar.id = 'progress-bar';


    var hideSplash = function () {
        var splash = document.getElementById('application-splash-wrapper');

    var setProgress = function (value) {
        var bar = document.getElementById('progress-bar');
        if(bar) {
            value = Math.min(1, Math.max(0, value));
            bar.style.width = value * 100 + '%';

    var createCss = function () {
        var css = [
            'html {',
            '   height: 100%;',
             '   background-color: transparent;',
            'body {',
             '   background-color: transparent;',

            '#application-splash-wrapper {',
            // '    background-color: #009AB6;',
            '   background-color: transparent;',
            '    position: absolute;',
            '    top: 0;',
            '    left: 0;',
            '    height: 100%;',
            '    width: 100%;',
            '    background-size: cover;',

            '#application-splash {',
            '    position: absolute;',
            '    top: calc(50% - 28px);',
            '    width: 264px;',
            '    left: calc(50% - 132px);',

            '#application-splash img {',
            '    width: 100%;',

            '#progress-bar-container {',
            '    margin: 20px auto 0 auto;',
            '    height: 2px;',
            '    width: 100%;',
            '    background-color: #1d292c;',

            '#progress-bar {',
            '    width: 0%;',
            '    height: 100%;',
            // '    background-color: 	#FFFFFF;',
            '    background-color: #f60;',
            '@media (max-width: 480px) {',
            '    #application-splash {',
            '        width: 170px;',
            '        left: calc(50% - 85px);',
            '    }',

        var style = document.createElement('style');
        style.type = 'text/css';
        if (style.styleSheet) {
          style.styleSheet.cssText = css;
        } else {




    app.on('preload:end', function () {
    app.on('preload:progress', setProgress);
    app.on('start', hideSplash);

Hi @chuxinhao,

Your question is why it goes black for just an instant before it shows the white background / loading bar, right?

I think that’s the point where Playcanvas loads and parses your custom loading screen/CSS and I am not sure if there is any way around it.

In the CSS, try changing the background-color of the body and html to a solid colour instead of using transparent.

I’ve tried that on a loading screen of my own, but still got the black background for an instant.

1 Like

I also think the engine loads the way it preloads the interface and then parses my custom CSS.

Not sure which black screen you guys refer to. Are you referring to this screen?:

Hi @LeXXik,

I think @chuxinhao is referring to that momentary black screen showing for an instant, when Playcanvas starts loading and before the custom splash screen is rendered.

I think given the splash screen is a .js file that requires loading/parsing, the current system makes that unavoidable.

1 Like

I feel like I don’t see something obvious here :slight_smile: Is it visible on the video from the original post? I even downloaded it to go frame by frame… Nevertheless, I think all the custom loader does is it injects a div element, as a wrapper and then removes it. Are you saying there is a black screen appearing after the JS code inserts the div and before it is actually drawn on the screen? But how is that possible? I mean the injected div should inherit the CSS properties of the parent (<body>?). What am I missing? Also, I don’t see a black screen in my app (my eyes could be old, though, and miss some frames :slight_smile: ).

This frame, not a black screen to be accurate, playcanvas grey:

1 Like

Ah, thank you, @Leonidas! I see now. Well, for that one, it should be enough to change the CSS properties of body and application-splash-wrapper, I think.

I’ve just tried with a simple project
The app: a fullscreen yellow 2D element.
The loading screen: white color.

            'body {',
            '    background-color: #FFFFFF;',

            '#application-splash-wrapper {',
            '    position: absolute;',
            '    top: 0;',
            '    left: 0;',
            '    height: 100%;',
            '    width: 100%;',
            '    background-color: #FFFFFF;',

As you can see, I don’t have that grey color. The white loading screen appears, and after that the yellow app starts.

Also, if I remember correctly, some browsers read CSS transparent as a black color with opacity 0. Not sure if it is related, but I think @chuxinhao you would want to use a fixed color code instead. Perhaps white #FFFFFF?

Well, on a local project it makes sense that it will load in the same instant, there is no fetch/loading time for the resources.

I’ve tried it again on an editor project using a custom splash screen, and I get the black/grey background for an instant.


That actually makes sense, might be due to fetching files. I am on personal account, so I don’t have access to the custom splash screen feature. Probably, as you mentioned, there is no way around it then.

1 Like
  • Yes, that’s what I’m trying to say
  • Is there a way to solve this problem now?

Unlikely if what Leonidas said is correct.

You would have to download the build and change the original index.html style.

I’m wondering if it’s possible to add an external script to the settings and see if that gets added soon enough to change the css

It should be his influence

Yes, that’s right. You will need to change that to get rid of the flash of the grey/black screen.

How to modify, I also encountered this problem when developing and previewing the web page


这不是中文频道 请说英语 (better to speak english please)