/* ----- Progress Bar ----- */
.progress-bar {
  opacity: 0;
  height: 2px;
  width: 0;
  background: #3bb3e0 linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 900% 900%;
  transition: opacity 1s ease-in-out, width 0s ease-in-out 1s;
  animation: rainbow 3s ease infinite;
}

.progress-bar.on {
  width: 100%;
  opacity: 1;
  transition: opacity 1s ease-in-out, width 2s ease-in-out;
}

@keyframes rainbow {
    0%  { background-position: 0% 100%; }
   50%  { background-position: 100% 200%; }
  100%  { background-position: 0% 100%; }
}