progress.scss

#progress { //it's just a div
  display: block;
  width: 500px; 
  position: fixed; 
  top: 55%;
  left: 50%;
  margin-left: -250px;
  z-index: 17001;
  
  //first attempt tried to animate a multi-stage gradient. Didn't work.
  background-image: linear-gradient(90deg, #0b5093, #0c5dab); //make it an actual image, see if I care
  border-radius: 4px;
  border: 1px solid #eee;
  outline: 1px solid #999;
  box-shadow: 0px 0px 20px 20px #fff;
  height: 30px; //the reason I'm doing this - thanks firefox & chrome
  
  position: relative; // absolutes, look here
  &:before, &:after {
    position: absolute;
    content: "";
    display: block;
    background: #eee;
    height: 100%;
    animation-duration: 1.7s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out; //linear just "time passing", ease-in-out more laborious
    }
  &:before, {
    left: 0;
    animation-name: progress_before;
    }
  &:after {
    right: 0;
    animation-name: progress_after;
    }
  }
  
  

@keyframes progress_before {
  0% { width: 0%; }
  100% { width: 65%; }
}

@keyframes progress_after {
  0% { width: 65%; }
  100% { width: 0%; }
}

As of right now, <progress> ignores "height: ..." css in Firefox & Chrome. I just needed the equivalent of a spinner that took up more room, so here's css for a bouncing one.