Load mask styles

The configurator automatically displays a load mask in several situations to inform users that background tasks are in progress.

By default, these load masks are designed to be unobtrusive and generic, ensuring they blend well with most configurators. However, if you prefer a more distinctive look that aligns closely with your configurator's design, you can easily customize the load masks using custom CSS.

General purpose configurator load mask

This load mask is designed to inform users when tasks are in progress, during which interaction with the configurator is not possible. By default, it displays a loading spinner icon accompanied by descriptive text:

This type of load mask is displayed in the following situations:

• When a configuration is being prepared for sharing
• During file uploads
• When the configurator is reconnecting to the server, such as in cases of poor internet connectivity
• When the "Show load mask" slot of the configurator is activated
• When custom code invokes CtrlUtils.showLoadMask

How to customize

Here is a code snippet, showing how to customize certain parts of the load mask which should give you a good starting point for your own customizations:

/* Change the load masks background which covers the whole configurator */
.cbn-page-mask {
  background-color: rgba(0, 64, 160, 0.4);
}

/* Remove the background of the box in the middle */
.cbn-page-mask .x-mask-msg {
  background: transparent;
}

/* Change font family & color of the description text */
.cbn-page-mask .x-mask-msg .x-mask-msg-text {
  color: white;
  font-family: Inter;
}

/* Hide the default loading spinner icon */
.cbn-page-mask .x-mask-msg .x-mask-msg-text {
  background: none;
}

/* Show a custom pulsating icon */
.cbn-page-mask .x-mask-msg .x-mask-msg-text:after {
  content: "";
  position: absolute;
  left: calc(50% - 16px);
  top: -38px;
  width: 32px;
  height: 32px;
  background: url(https://path/to/your/logo.png) no-repeat center / 32px;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

All of the above would lead to the following load mask:

3d viewer load mask

There are two types of load masks displayed in the 3D viewer:

• A large load mask which covers the entire 3d viewer and includes descriptive text to let the user know what is currently happening.
  
• A small load mask which only shows a subtle loading spinner icon located in the bottom right corner of the 3d viewer, without any accompanying text.
  

The large load mask is shown when initially bootstrapping the viewer and when preparing the scene to be viewed in AR.

The small load mask is shown when new data is being loaded in the background which can be the case when loading a new 3d model into the scene or when changing shown materials & textures.

How to customize

Here is a code snippet, showing how to customize certain parts of both, the small & the large viewer load mask, which should give you a good starting point for your own customizations:

/* Make the large load mask cover the whole configurator, not just the 3d viewer, and change its background color */
.cfgr-viewer3d .viewer-load-mask {
  position: fixed;
  background-color: rgba(0, 64, 160, 0.4);
}

/* Change font family & color of the shown description */
.cfgr-viewer3d .viewer-load-mask .viewer-load-mask-text {
  color: white;
  font-family: Inter;
}

/* Hide the default loading spinner icon of the small & large load mask */
.cfgr-viewer3d .viewer-load-mask .viewer-load-mask-icon:before {
  display: none;
}

/* Show a custom pulsating icon for the small & large load mask */
.cfgr-viewer3d .viewer-load-mask .viewer-load-mask-icon {
  width: 32px;
  height: 32px;
  background: url(https://path/to/your/logo.png) no-repeat center / 32px;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Show a background for the small load mask & move it to the top left */
.cfgr-viewer3d .viewer-load-mask.viewer-load-mask-small {
  left: 16px;
  top: 16px;
  width: 52px;
  height: 52px;
  background: #0040A0;
  border-radius: 52px;
}

All of the above would lead to the following load masks where the large one resembles the appearance of the customized configurator load mask shown above: