paper-progress.css

/*
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/

:host {
  display: inline-block;
  width: 200px;
  height: 4px;
}

#progressContainer {
  position: relative;
  height: 100%;
  background-color: #c8c8c8;
  overflow: hidden;
}

#activeProgress,
#secondaryProgress {
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

#activeProgress {
  background-color: #0f9d58;
}

#secondaryProgress {
  background-color: #87ceac;
}

#activeProgress.indeterminate {
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation: indeterminate-bar 1s linear infinite;
  animation: indeterminate-bar 1s linear infinite;
}

@-webkit-keyframes indeterminate-bar {
  0% {
    -webkit-transform: translate(-50%) scaleX(0);
  }
  50% {
    -webkit-transform: translate(0%) scaleX(0.3);
  }
  100% {
    -webkit-transform: translate(50%) scaleX(0);
  }
}

@keyframes indeterminate-bar {
  0% {
    transform: translate(-50%) scaleX(0);
  }
  50% {
    transform: translate(0%) scaleX(0.3);
  }
  100% {
    transform: translate(50%) scaleX(0);
  }
}