.reader-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(190px, 48vw);
}

.reader-loader[hidden] {
  display: none !important;
}

.load-progress {
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.load-progress i {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1aa99c, var(--reader-teal), #70e6da);
  box-shadow: 0 0 8px rgba(43, 195, 179, 0.34);
  animation: reader-load 1.05s ease-in-out infinite;
}

.reader-loader.determinate .load-progress i {
  animation: none;
  transition: width 0.18s ease;
}

@keyframes reader-load {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(300%); }
}