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

Overview

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

Create ChromeBarItemUploadStatus Widget

Create a js file called MyChromeBarItemUploadStatusWidget.js, as descibed 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");
          },

...

Create CreateMyUploadStatus.scss

In your gbc-project-dir/customization/customization-project-dir/sass directory, create a file called CreateMyUploadStatus.scss.

Copy the code shown in the example and save:

// in the scss 

.uploadstatus {
    position: fixed;
    z-index: 9999;
    top: 40%;
    left: 50%;

}

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%;).

Update customization.scss

Open the gbc-project-dir/customization/customization-project-dir/sass/customization.scss file for editing.

Copy the code shown in the example and save.

@import "CreateMyUploadStatus";

In this example we import the CreateMyUploadStatus style.

Compile

$ gbc build --customization customization-project-dir

Test

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

TIP: Use CTRL + F5 to clear the browser cache before you see your changes.

![File upload icon]