.loader {
    background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .7) 1rem, rgba(16, 16, 16, .7) 1rem, rgba(16, 16, 16, .7) 2rem);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999999;
}

.loader--message {
    color: #FFF;
    display: block;
    font-weight: bold;
    margin: calc(50vh + 40px) auto 0 auto;
    left: min(30%, 200px);
    right: min(30%, 200px);
    position: absolute;
    text-align: center;
    top: 0;
}

.loader--ring {
    display: inline-block;
    position: relative;
    left: calc(50vw - 32px);
    top: calc(50vh - 32px);
    width: 64px;
    height: 64px;
}
.loader--ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #cef;
  border-radius: 50%;
  animation: loader--ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--buttonBgColor) transparent transparent transparent;
}
.loader--ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.loader--ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.loader--ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes loader--ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}