/*** progress bar ***/

@-webkit-keyframes pulse {
   30% { opacity: 0.6; }
   60% { opacity: 0; }
  100% { opacity: 0.6; }
}
@keyframes pulse {
   30% { opacity: 0.6; }
   60% { opacity: 0; }
  100% { opacity: 0.6; }
}

#spfjs-progress-bar {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: -6px;
  width: 0%;
  height: 2px;
  background: #45C2FF;
  border-radius: 1px;
  /* the following transition times are overridden by JS */
  -webkit-transition: width 150ms ease-out;
  transition: width 150ms ease-out;
}
#spfjs-progress-bar.done {
  opacity: 0;
}

#spfjs-progress-bar dd,
#spfjs-progress-bar dt {
  position: absolute;
  top: 0;
  height: 2px;
  box-shadow: #45C2FF 1px 0 6px 1px;
  border-radius: 100%;
}
#spfjs-progress-bar dd {
  opacity: 0.6;
  width: 20px;
  right: 0;
  clip: rect(-6px, 22px, 14px, 10px);
}
#spfjs-progress-bar dt {
  opacity: 0.6;
  width: 180px;
  right: -80px;
  clip: rect(-6px, 90px, 14px, -6px);
}

#spfjs-progress-bar.waiting dd,
#spfjs-progress-bar.waiting dt {
  -webkit-animation: pulse 2s ease-out 0s infinite;
  animation: pulse 2s ease-out 0s infinite;
}