This procedure shows you how to add a file loading image that displays in the center of the page when file loading is in progress.

Overview

This customization involves styling of the loading-bar container by overriding css selectors in <GBC_PROJECT_DIR>/src/sass/util/loading.scss

Create MyLoadingBar.scss

In your <GBC_PROJECT_DIR>/customization/<customization_project>/sass directory, create a file called MyLoadingBar.scss.

Copy the code shown in the example and save:

// in the scss 

$base-line-height: 100px;
$white: rgb(158,158,158);
$off-white: rgba($white, 0.2);
$spin-duration: 1s;
$pulse-duration: 750ms;

.processing .loading-bar {
    position: fixed;
    z-index: 9999;
    top: 40%;
    left: 50%;

    border-radius: 50%;
    width: $base-line-height;
    height: $base-line-height;
    border: .5rem solid $off-white;
    border-top-color: $white;
    animation: spin-loader $spin-duration infinite linear;
    &--double {
      border-style: double;
      border-width: .5rem;
    }
}

@keyframes spin-loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

This style example defines the animation icon and its behavior:

• The style is added for when the .gbc_ApplicationWidget.processing selector has the processing value. This means that the animation icon is shown only when the application is busy loading a file.
• 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%;)
• An at-rule, @keyframes spin-loader, specifies how the icon will gradually transform from the start to the end (0% and 100%) to give the rotation effect.
• The loading class has settings for the size, border, and color properties of the icon. Its animation property references the spin rule, and the spin duration value. The animation continues for ever and the linear value specifies an animation with the same speed from start to finish.

Update customization.scss

Open the <GBC_PROJECT_DIR>/customization/<customization_project>/sass/customization.scss file for editing.

Copy the code shown in the example and save.

@import "MyLoadingBar";

In this example we import the MyLoadingBar style.

Rebuild using grunt

$ grunt --customization=<customization_project_dir>

Test

View the changes by opening the GAS demos application in your browser. 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.

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.