@keyframes lbaic-settings-loading-bar {
  0%, 100% {
    transform: translate3d(-100%, 0, 0);
  }

  50% {
    transform: translate3d(100%, 0, 0);
  }
}

.lbaic-settings-loading-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;

  &-in {
    width: 100%;
    height: 2px;
    background-image: var(--lbaic-settings-loading-bg);
    transform: translate3d(-100%, 0, 0);
    animation: lbaic-settings-loading-bar 4200ms linear infinite;
  }
}

.lbaic-settings-loading-circle {
  width: var(--lbaic-settings-loading-circle-width, 100%);
  height: auto;
  display: block;
  fill: transparent;
  stroke: var(--lbaic-settings-loading-circle-width-stroke, currentColor);
  stroke-dasharray: 76;
  animation: lbaic-settings-loading-circle-stroke 2400ms linear infinite;
  transform: rotate(-90deg);
}

@keyframes lbaic-settings-loading-circle-stroke {
  0% {
    stroke-dashoffset: 76;
  }

  50% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -76;
  }
}