:root {
  --initial-loader-border-radius: 20px;
  --initial-loader-color: #4343b0;
}

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.loader-logo {
  max-height: 1024px;
  max-width: 1024px;
  height: 7rem;
  width: 7rem;
  margin-bottom: 2rem;
}

.initial-loader-bar {
  background-color: #d1d5db;
  border-radius: var(--initial-loader-border-radius);
  height: 0.5rem;
  width: 10rem;

  position: relative;
  overflow: hidden;
}

.initial-loader-bar__progress {
  position: absolute;
  background-color: var(--initial-loader-color);
  border-radius: var(--initial-loader-border-radius);
  bottom: 0;
  top: 0;
  width: 50%;

  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: initial-loader-bar;
}

@keyframes initial-loader-bar {
  from {
    left: 0;
    width: 0%;
  }
  50% {
    left: 0;
    width: 100%;
  }
  to {
    left: 100%;
    width: 100%;
  }
}