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.

Figure: File upload percentage displaying in the default position


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

About this task

This customization involves styling of the loading-bar container by overriding css selectors in gbc-project-dir/src/sass/util/loading.scss.

  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.

    Figure: File upload percentage displaying in the center of the screen