Add a file loading image

Add a file loading image to the user interface of your Genero Web Client for JavaScript (GWC-JS) project.

1. In your project_dir/customization/customization_project/scss/customization.scss file add a style for the ApplicationHostMenuRuntimeWidget. In this example we add the style for when the .gbc_ApplicationHostMenuRuntimeWidget.processing selector has the processing value. The icon is shown only when the widget is processing the loading of a file. This behavior is specified in the widget file ApplicationHostMenuRuntimeWidget.js.

   @import "MyMainContainer";
   .gbc_ApplicationHostMenuRuntimeWidget.processing {
       background-image: url("../resources/img/html5_circle.gif");
       a i::before {
           content: none;
       }
   }
   

   You can see:
   • The background-image property sets the URL for locating the new image file.
   • The ::before selector removes the previously-used icon.
2. Rebuild using grunt.
3. View the changes by opening the GAS demos application in your browser. You can do this by configuring the demos application for your project, see Test customization using the demo.
4. In the Topic tree of the demo directory, navigate to User Interface > UI Basics > Widgets. Double-click on the ProgressBar application in the panel to the right.
   Tip: You may need to use CTRL + F5 to clear the browser cache before you see your changes.
5. Click on the Go1 menu button to start a file loading. The new icon is displayed on the application title bar while the file is being loaded.