Center file loading icon

This procedure shows you how to center the icon and percentage shown when a file is loading.

When you upload a file into your application, the chromebar briefly displays an animated icon and then displays a percentage, as shown in Figure 1.

By default, the icon and percentage display in the chromebar. This procedure shows you how to display them in the center of the screen.

1. Create a js file called MyChromeBarItemUploadStatusWidget.js, as described in Change file loading icon. Add the upload status class to the constructor:

   ...
             constructor: function(opts) {
               $super.constructor.call(this, opts);
               // in default widget, we call: this.setImage("zmdi-upload");  
               this.setImage(context.ThemeService.getResource("img/html5_circle.gif"));
               this.addClass("uploadstatus");
             },
   
   ...

2. In your gbc-project-dir/customization/customization-project-dir/sass directory, create a file called CreateMyUploadStatus.scss and add the following code:

   // in the scss 
   .uploadstatus {
       position: fixed;
       z-index: 9999;
       top: 40%;
       left: 50%;
       color: $palette-primary;
   }

   In this style example, the position of the icon is fixed to display over other elements (z-index=9999) in the center of the page (top: 40%; left: 50%;). The color palette is set to palette-primary to ensure that the percentage text is visible against the background; you can set this to another color, but the background color should not be white.

3. Open the customization-project-dir/sass/customization.scss file and add the following import statement:

   @import "CreateMyUploadStatus";

   In this example we import the CreateMyUploadStatus style.

4. Save your changes and rebuild your customization using gbc build:

   $ gbc build --customization customization-project-dir

5. Test that your changes work as expected.

   View the changes by opening an app with a file upload feature. Upload a large file to allow time to view the icon and percentage.

   Tip:

   You may need to use CTRL + F5 to clear the browser cache before you see your changes.