Change progress indicator

This procedure describes how to change the progress indicator that displays when the GBC is waiting for a response from the server or when a file is uploading.

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:

   $loading-size: 100px;
   $loading-color: $ui-primary-color;
   $loading-backgroundColor: $ui-border-color;
   $loading-spin-duration: 1s;
   
   .processing .loading-bar, .loading-bar[percent] {
       transform: none;
       position: fixed;
       background: transparent;
       z-index: 9999;
       top: calc(50% - $loading-size / 2);
       left: calc(50% - $loading-size / 2);
       border-radius: 50%;
       width: $loading-size !important;
       height: $loading-size !important;
       border: .5rem solid $loading-backgroundColor;
       border-top-color: $loading-color;
       animation: spin-loader $loading-spin-duration infinite linear;
       opacity: 1;
       transition: opacity 1s 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 targets two selectors: .processing .loading-bar, which applies while GBC is waiting for a response from the server, and .loading-bar[percent], which applies while a file is uploading to the server. Both states use the same rules, so the customized indicator displays consistently either way.
   • The transform: none property cancels the horizontal slide animation that GBC's default [percent] style otherwise applies.
   • 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, and by uploading a file, to confirm the indicator displays consistently in both cases.

   Tip:

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