.zeero-loading-bar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.zeero-loading-bar-container .zeero-loading-message {
  font-size: 0.9em;
}

.zeero-loading-bar-container .zeero-loading-message::after {
  position: absolute;
  margin-left: 0.1rem;
  content: " ...";
  display: inline-block;
  animation: loading steps(4) 1.5s infinite;
  clip: rect(auto, 0px, auto, auto);
}

@keyframes loading {
  to {
    clip: rect(auto, 10px, auto, auto);
  }
}

.zeero-loading-bar-container .zeero-loading-bar-slider-container {
  height: 0.25em;
  width: 100%;
  background-color: var(--dark-grey);
  margin-top: 0.7em;
  overflow: hidden;
  border-radius: 5px;
}

.zeero-loading-bar-container .zeero-loading-bar-slider-container .zeero-loading-bar-slider {
  height: 100%;
  background-color: var(--primary);
  animation: indeterminateAnimation 3s infinite linear;
  transform-origin: left;
  border-radius: 5px;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(0) scaleX(0);
  }
  40% {
    transform: translateX(0) scaleX(0.4);
  }
  100% {
    transform: translateX(100%) scaleX(0.5);
  }
}