How to display a custom Splash-Screen image while the app is loading

 

Note: this feature requires v1.1 or newer

 

To display a Splash Screen (an image) while the application is loading, please follow these steps:

  1. Add the image to your application project. Here is an example:

    Example of file in the Solution Explorer

    Note: it doesn't matter what name you use for the image. We recommend using either the PNG or JPG extension, and keeping the image relatively small in terms of pixel size, so that it fits into any screen including phones or other mobile devices.
  2. Compile your project to HTML and JavaScript by launching the project and waiting for the HTML/JS generation to complete.
  3. Go to the Output folder (ie. the place where the HTML and JS files are generated), and create a copy of the file index.html. For example, we can name it "index2.html". The reason is that we are going to manually modify this file, and we don't want the compiler to override our changes the next time that you compile the application.
  4. Modify the file "index2.html" and add the following code to the end of the <head> section:

    <style>
       #splashScreen {
          background: url('app-cshtml5/res/MyApplicationProject/MyFolder/MySplashScreen1.png') no-repeat;
          width: 482px;
          height: 178px; }
    </style>


    where you should replace the text in bold with your project name, your folder (if any), your image file name, and its size in pixels (width and height).

    Here is an example:

    Example of code to display a Splash Screen

 

Support

For any question, please post a message on the forums or contact us at support@cshtml5.com