Customize Loading screen. Element doesn't change position

Help & Support
1

Hello. I want to customize my loading screen.
And I need my progress bar to be inside the image

 var showSplash = function () {
        // splash wrapper
        var wrapper = document.createElement('div');
        wrapper.id = 'application-splash-wrapper';
        document.body.appendChild(wrapper);

        // splash
        var splash = document.createElement('div');
        splash.id = 'application-splash';
        wrapper.appendChild(splash);
        splash.style.display = 'none';
        
        var logo = document.createElement('img');
         logo.src = 'someImg';
        splash.appendChild(logo);
        logo.onload = function () {
            splash.style.display = 'block';
        };
        var barSc = document.createElement('img');
        barSc.src ='img';
        barSc.id = 'imgBar';
        splash.appendChild(barSc);
        var container = document.createElement('div');
        container.id = 'progress-bar-container';
        splash.appendChild(container);

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

    };

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

    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 = [
            'body {',
            '    background-color: #283538;',
            '}',

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

            '#application-splash-wrapper {',
            '    position: relative;',
            '    top: 0;',
            '    left: 0;',
            '    height: 100%;',
            '    width: 100%;',
            '    background-image: url(data:image/png;base64,someimg);',
            '    background-size: cover;',
            '}',

            '#application-splash img {',
            '    position:absolute;',
            '    width: 100%;',
            '    top:30%',
            '    left:50%',
            '}',
            '#imgBar {',
            '    position: absolute;',
            '    top: 0%;',
            '    left: 0%',
            '}',
            '#progress-bar-container {',
            '    position: absolute;',
            '    top:10%',
            '    left:10%',
            '    z-index:5',
            '    height: 10px;',
            '    width: 30%;',
            '    background: #ffffff;',
            '    border-radius: 30px',
            '}',

            '#progress-bar {',
            '    width: 0%;',
            '    height: 100%;',
            '    background: rgb(208,21,125);',
            '    background: linear-gradient(90deg, rgba(208,21,125,1) 0%, rgba(249,0,16,1) 40%, rgba(255,176,0,1) 100%);',
            '    border-radius: 30px',
            '}',
            '@media (max-width: 480px) {',
            '    #application-splash {',
            '        width: 170px;',
            '        left: calc(50% - 85px);',
            '    }',
            '}'
        ].join("\n");

But when I try to move my progress bar container nothing changes

2

It probably be easier to have the progress-bar-container to have application-splash-wrapper as it’s parent so you can position the logo and the bar separately.

Edit: Is this what you are trying to do: https://playcanvas.com/editor/scene/914154

3

On computer its in the middle, but on mobile not(

4

Updated that project to move it to the middle of the PlayCanvas logo

1 Like
5

Thank you. I think I know what to do now.