third_party/polymer/components/paper-progress/paper-progress.css

   1 /*
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 */
   9
  10 :host {
  11   display: inline-block;
  12   width: 200px;
  13   height: 4px;
  14 }
  15
  16 #progressContainer {
  17   position: relative;
  18   height: 100%;
  19   background-color: #c8c8c8;
  20   overflow: hidden;
  21 }
  22
  23 #activeProgress,
  24 #secondaryProgress {
  25   -webkit-transform-origin: left center;
  26   transform-origin: left center;
  27   -webkit-transform: scaleX(0);
  28   transform: scaleX(0);
  29 }
  30
  31 #activeProgress {
  32   background-color: #0f9d58;
  33 }
  34
  35 #secondaryProgress {
  36   background-color: #87ceac;
  37 }
  38
  39 #activeProgress.indeterminate {
  40   -webkit-transform-origin: center center;
  41   transform-origin: center center;
  42   -webkit-animation: indeterminate-bar 1s linear infinite;
  43   animation: indeterminate-bar 1s linear infinite;
  44 }
  45
  46 @-webkit-keyframes indeterminate-bar {
  47   0% {
  48     -webkit-transform: translate(-50%) scaleX(0);
  49   }
  50   50% {
  51     -webkit-transform: translate(0%) scaleX(0.3);
  52   }
  53   100% {
  54     -webkit-transform: translate(50%) scaleX(0);
  55   }
  56 }
  57
  58 @keyframes indeterminate-bar {
  59   0% {
  60     transform: translate(-50%) scaleX(0);
  61   }
  62   50% {
  63     transform: translate(0%) scaleX(0.3);
  64   }
  65   100% {
  66     transform: translate(50%) scaleX(0);
  67   }
  68 }