Customizing the loading screen

After updating map.apps, these modifications have to be applied again.

For example, a gif image is shown in the loading screen instead of the default animation by partially adjusting the index.html as described in the following:

index.html

<div id="splashScreen" class="ct-splashscreen splashScreen">
    <!-- Custom Loading Screen Content in the following line -->
    <div style="background-image: url(http://urltomy.gif);width:100%;height:100%;"></div>
    <div class="launch__title">
        <h4 class="splashHeader">
            <span class="launchLog"></span>
        </h4>
    </div>
    <div class="launch__bundles">
        <p class="splashBundle">{nbsp}</p>
    </div>
</div>

To show a dark loading screen, add the class ct-splashscreen--dark to the main DIV element:

index.html

<div id="splashScreen" class="ct-splashscreen ct-splashscreen--dark splashScreen">
    ...
</div>

Changes in the index.html file might require changes in CSS styles too. Either import a custom CSS file or manipulate the init.css accordingly.

To show a custom loading screen for a single app, create a custom index.html file inside the app.