This procedure shows you how to add an image that displays in the center of the screen when the GBC is waiting for a response from the server.

Overview

This customization involves styling of the loading-bar container by overriding css selectors in gbc-project-dir/src/sass/util/loading.scss. The image displays as a spinning circle in the center of the screen.

Create MyLoadingBar.scss

In your gbc-project-dir/customization/customization-project-dir/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 .processing selector of the .gbc_ApplicationWidget 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 gradually transforms 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-dir/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.

Compile

$ gbc build --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.