Generated by SassMeister.com.

SassMeister-input-HTML.jade

.progress
  .inner-progress

SassMeister-input.sass

// ----
// Sass (v3.3.5)
// Compass (v)
// ----

@import "compass"
$spotcolor: #4a98ed

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content

=animation($name, $duration)
  -webkit-animation-name: #{$name}
  -webkit-animation-duration: #{$duration}
  -moz-animation-name: #{$name}
  -moz-animation-duration: #{$duration}
  animation-name: #{$name}
  animation-duration: #{$duration}
  animation-fill-mode: forwards
  -webkit-animation-fill-mode: forwards

+keyframes(progress)
  0%
    width: 0
  20%
    width: 10%
  30%
    width: 20%
  40%
    width: 25%
  50%
    width: 27%
  60%
    width: 30%
  70%
    width: 33%
  80%
    width: 35%
  90%
    width: 37%
  100%
    width: 100%

+keyframes(progress-finished)
  0%
    left: 30%
  90%
    left: 110%
  100%
    left: 0
    background: $spotcolor

.progress
  height: 10px
  border: 1px solid #cecece

.inner-progress
  background-color: $spotcolor
  height: 10px
  +animation(progress, 8s)

  &.finished
    position: relative
    left: 100%
    border: 1px solid red
    +background-image(linear-gradient(left, #fff, $spotcolor))
    +animation(progress-finished, 2s)


  
  

  

SassMeister-output.css

@-webkit-keyframes progress {
  0% {
    width: 0;
  }

  20% {
    width: 10%;
  }

  30% {
    width: 20%;
  }

  40% {
    width: 25%;
  }

  50% {
    width: 27%;
  }

  60% {
    width: 30%;
  }

  70% {
    width: 33%;
  }

  80% {
    width: 35%;
  }

  90% {
    width: 37%;
  }

  100% {
    width: 100%;
  }
}
@-moz-keyframes progress {
  0% {
    width: 0;
  }

  20% {
    width: 10%;
  }

  30% {
    width: 20%;
  }

  40% {
    width: 25%;
  }

  50% {
    width: 27%;
  }

  60% {
    width: 30%;
  }

  70% {
    width: 33%;
  }

  80% {
    width: 35%;
  }

  90% {
    width: 37%;
  }

  100% {
    width: 100%;
  }
}
@keyframes progress {
  0% {
    width: 0;
  }

  20% {
    width: 10%;
  }

  30% {
    width: 20%;
  }

  40% {
    width: 25%;
  }

  50% {
    width: 27%;
  }

  60% {
    width: 30%;
  }

  70% {
    width: 33%;
  }

  80% {
    width: 35%;
  }

  90% {
    width: 37%;
  }

  100% {
    width: 100%;
  }
}
@-webkit-keyframes progress-finished {
  0% {
    left: 30%;
  }

  90% {
    left: 110%;
  }

  100% {
    left: 0;
    background: #4a98ed;
  }
}
@-moz-keyframes progress-finished {
  0% {
    left: 30%;
  }

  90% {
    left: 110%;
  }

  100% {
    left: 0;
    background: #4a98ed;
  }
}
@keyframes progress-finished {
  0% {
    left: 30%;
  }

  90% {
    left: 110%;
  }

  100% {
    left: 0;
    background: #4a98ed;
  }
}
.progress {
  height: 10px;
  border: 1px solid #cecece;
}

.inner-progress {
  background-color: #4a98ed;
  height: 10px;
  -webkit-animation-name: progress;
  -webkit-animation-duration: 8s;
  -moz-animation-name: progress;
  -moz-animation-duration: 8s;
  animation-name: progress;
  animation-duration: 8s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
.inner-progress.finished {
  position: relative;
  left: 100%;
  border: 1px solid red;
  background-image: -moz-linear-gradient(left, #ffffff, #4a98ed);
  background-image: -webkit-linear-gradient(left, #ffffff, #4a98ed);
  background-image: linear-gradient(to right, #ffffff, #4a98ed);
  -webkit-animation-name: progress-finished;
  -webkit-animation-duration: 2s;
  -moz-animation-name: progress-finished;
  -moz-animation-duration: 2s;
  animation-name: progress-finished;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

SassMeister-rendered.html

<div class="progress">
  <div class="inner-progress"></div>
</div>