Add Loading GIF to the Geocortex Splash Screen

The default Geocortex Splash Screen gives no indicator to the user as to what it is doing. For complex sites, this loading process may see like a server timeout. Adding an animated GIF loader to the Splash Screen will give users an indicator that something is being done.

Tutorial Steps

  1. Create or find a suitable GIF animation to display on the Splash Screen. There are many online websites designed for the creation and distribution of these custom GIS load animations, such as:
  2. Create a custom folder for the loader GIF file. This will keep it separate from the standard Geocortex® images.
    • In the Geocortex HTML5 directory (typically C:\inetpub\wwwroot\HTML5), navigate to the \Resources\Images folder and create a new folder named Custom. Once the Custom folder is created, copy the GIF file into it.

  3. Edit the Geocortex Viewer for HTML5 index.html file

    • Navigate back to the Geocortex HTML5 directory (typically C:\inetpub\wwwroot\HTML5)
    • Make a backup of your index.html file
    • Using a text editing program, such as Notepad++, open the index.html file

    • Look for the HTML markup similar to:

      <!-- Splash Screen Markup --> <div class="splash-overlay"> <div class="splash-plate"> <img class="splash-image" src="Resources/Images/splash-logo.png" alt=""/> <p class="splash-paragraph">This application uses licensed Geocortex Essentials technology for the Esri<sup>&reg;</sup> ArcGIS platform. All rights reserved.</p> </div> </div>

  4. Insert the HTML code to display the animation GIF

    • Add the following line into the HTML <img src="Resources/Images/Custom/custom.gif" alt="loading..." style="display: block; margin: auto; padding: 1em 0 1em 0;">
    • Substitute the file name of your custom GIF file for custom.gif

    • Your final HTML markup should look like the Modified Code below.

      <!-- Splash Screen Markup --> <div class="splash-overlay"> <div class="splash-plate"> <img class="splash-image" src="Resources/Images/splash-logo.png" alt=""/> <img src="Resources/Images/Custom/custom.gif" alt="loading..." style="display: block; margin: auto; padding: 1em 0 1em 0;"> <p class="splash-paragraph">This application uses licensed Geocortex Essentials technology for the Esri<sup>&reg;</sup> ArcGIS platform. All rights reserved.</p> </div> </div>