[SOLVED] How to set a loading.js splash SVG-image percentage-wise

Help & Support
1

How do I - percentage-wise - set a loading.js splash SVG-image. It seems it only takes px-setting, which is quite cumbersome in regards to exporting for mobile :-/

Example from line 40 to 120 (px-settings and .svg-file):


var createCss = function () {
        var css = [
            'body {',
            '    background-color: #283538;',
            '}',

            '#application-splash-wrapper {',
            '    position: absolute;',
            '    top: 0;',
            '    left: 0;',
            '    height: 100%;',
            '    width: 100%;',
            '    background-image: radial-gradient(#102030, #000000 , #101020);',
            '}',

            '#application-splash {',
            '    position: absolute;',
            '    top: calc(50% - 270px);',
            '    width: 540px;',
            '    left: calc(50% - 270px);',
            '}',

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

            '#progress-bar-container {',
            '    margin: 20px auto 0 auto;',
            '    height: 4px;',
            '    width: 100%;',
            '    background-image: linear-gradient(to left,#d0e3db, #f8f9e1 , #eef2c8);',
            '}',

            '#progress-bar {',
            '    width: 0%;',
            '    height: 100%;',
            '    background-color: #fff;',
            '}',
            '@media (max-width: 600px) {',
            '    #application-splash {',
            '        width: 270px;',
            '        left: calc(50% - 85px);',
            '    }',
            '}'
        ].join("\n");

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

        document.head.appendChild(style);
    };


    createCss();

    showSplash();
    
    // Use an image from the assets in the project via the asset registry
    // More information: http://developer.playcanvas.com/en/api/pc.AssetRegistry.html
    app.on('preload:start', function() {
        var splash = document.getElementById('application-splash');
        
        var logoAsset = app.assets.find('DesOn_Promo_SplashSVG4.svg');
        
        if (logoAsset) {
            var logo = document.createElement('img');    
            logo.src = logoAsset.getFileUrl();

            // Insert DOM before the progress bar
            if (splash.childNodes.length > 0) {
                splash.insertBefore(logo, splash.childNodes[0]);
            } else {
                splash.appendChild(logo);
            }
            
            logo.onload = function () {
                splash.style.display = 'block';
            };
        }
    });

I have already tried many alternative standard CSS-methods

1 Like
2

Hi @Thomas_Due_Nielsen,

You can use percentages instead of pixels, to have your elements scale in relation to your window size.

For example here is a way to create a nice big Playcanvas logo and loader, that scales down on mobile:


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

            '#application-splash img {',
            '    width: 50%;',
            '    margin: 0px auto;',
            '    display: block;',
            '}',

image
image.png959×1226 23 KB

3

Great … thx again Leonidas

1 Like
4

btw @Leonidas … The splash is now quite large at higher resolutions, as I have to keep big at smaller ones. I am wondering if it can become screen-res dynamic?
As within the ‘@media’-method known from CCS (REACT-approach)

5

Sure, you can use CSS media queries to target resolution. Try adding the following code to your script:

            '@media (min-width: 960px) {',
                '#application-splash {',
                '    width: 300px;',
                '    left: calc(50% - 150px);',            
                '}',            
            '}',
1 Like