Change progress indicator

This procedure shows you how to change the progress indicator that displays when the GBC is waiting for a response from the server.

By default, the progress indicator displays as a linear bar at the top of the page, as in Figure 1.

This customization changes the progress indicator so it displays as a spinning circle in the center of the main container.

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

   // in the scss 
   $base-line-height: 100px;
   $white: rgb(158,158,158);
   $off-white: rgba($white, 0.2);
   $indicator-border-color: white;
   $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: $indicator-border-color;
       background-color: transparent;
       animation: spin-loader $spin-duration infinite;
       &--double {
         border-style: double;
         border-width: .5rem;
       }
   }
   
   @keyframes spin-loader {
     0% {
       transform: rotate(0deg);
     }
     100% {
       transform: rotate(360deg);
     }
   }
   
   .processing:not(.inactiveWindow) .loading-bar {
   	-webkit-animation: spin-loader $spin-duration infinite;
       animation: spin-loader $spin-duration infinite;
   }
   

   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 progress indicator is shown only when the GBC is waiting for a response from the server.
   • The position of the indicator is fixed to display over other elements (z-index=9999) in the center of the main container (top: 40%; left: 50%;).
   • 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 forever and the linear value specifies an animation with the same speed from start to finish.
   • 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.
2. Open the customization-project-dir/sass/customization.scss file and add the following import statement:

   @import "MyProgressIndicator";

   In this example we import the MyProgressIndicator style.

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

   $ gbc build --customization customization-project-dir

4. Test that your changes work as expected.

   View the changes by running an application that requests a response from the server.

   Tip:

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