Skip to content
Default help center home
Default help center home

Styling the loading modal

The loading modal provided by Default.com comes with a set of predefined styles. To override these styles, you can target specific class names and IDs. Below are the details for each component, including the default styles that you can customize.

Modal overlay

The overlay covers the entire viewport and provides a semi-transparent background.

.dftDefaultLoadingModal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5); /* Overlay background color */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

Modal container

The main container of the modal, which holds the header, content, and footer.

.dftDefaultLoadingModal__container {
  background-color: #fff; /* Modal background color */
  width: 540px; /* Modal width */
  height: 350px; /* Modal height */
  border-radius: 12px; /* Rounded corners */
  color: #1A1A1A; /* Text color */
  display: flex;
  flex-direction: column;
  box-shadow: rgba(34, 43, 72, 0.08) 0px 1px 4px; /* Box shadow */
  z-index: 999999;
}

Modal header

Contains the close button.

.dftDefaultLoadingModal__header {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-bottom: 1px solid rgb(204, 204, 204); /* Border color */
}

Close button

The button used to close the modal.

#dftDefaultLoadingModal__close__button {
  background: transparent;
  border: none;
  cursor: pointer;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

Content container

The container for the main content of the modal.

.dftDefaultLoadingModal__content__container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

Content

The main content area, typically used for displaying the loading spinner and text.

.dftDefaultLoadingModal__content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px;
}

Spinner

The loading spinner.

.dftDefaultLoadingModal__spinner {
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-top: 2px solid rgba(0,0,0,.8);
  border-right: 2px solid rgba(0,0,0,.8);
  border-radius: 99999px;
  width: 20px;
  height: 20px;
  animation: spin 0.45s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Footer

The footer section of the modal.

.dftDefaultLoadingModal__footer {
  display: flex;
  width: 100%;
  padding: 16px;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgb(204, 204, 204); /* Border color */
}
.dftDefaultLoadingModal__footer > p {
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 500;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

Text

Text displayed inside the modal.

#dftDefaultLoadingModal__text__id {
  color: #1A1A1A; /* Text color */
  font-size: 14px;
  font-weight: 500;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

A banner section within the modal for additional content.

.dftDefaultLoadingModal__banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  width: 100%;
  background-color: #F1F1F1; /* Banner background color */
  border-radius: 8px;
  gap: 24px;
}

By targeting these class names and IDs, you can customize the appearance of the loading modal to better fit your design requirements. Simply add your custom CSS rules to your stylesheet to override the default styles.

Powered by Plain