third_party/polymer/components-chromium/paper-spinner/paper-spinner.css

   1 /*
   2     @license
   3     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4     This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5     The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6     The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7     Code distributed by Google as part of the polymer project is also
   8     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9  */
  10
  11 /**************************/
  12 /* STYLES FOR THE SPINNER */
  13 /**************************/
  14
  15 /*
  16  * Constants:
  17  *      STROKEWIDTH = 3px
  18  *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
  19  *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
  20  *      ARCSTARTROT = 216 degrees (how much the start location of the arc
  21  *                                should rotate each time, 216 gives us a
  22  *                                5 pointed star shape (it's 360/5 * 3).
  23  *                                For a 7 pointed star, we might do
  24  *                                360/7 * 3 = 154.286)
  25  *      CONTAINERWIDTH = 28px
  26  *      SHRINK_TIME = 400ms
  27  */
  28
  29 :host {
  30   display: inline-block;
  31   position: relative;
  32   width: 28px; /* CONTAINERWIDTH */
  33   height: 28px; /* CONTAINERWIDTH */
  34 }
  35
  36 #spinnerContainer {
  37   width: 100%;
  38   height: 100%;
  39 }
  40
  41 #spinnerContainer.active {
  42   /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
  43   -webkit-animation: container-rotate 1568ms linear infinite;
  44   animation: container-rotate 1568ms linear infinite;
  45 }
  46
  47 @-webkit-keyframes container-rotate {
  48   to { -webkit-transform: rotate(360deg) }
  49 }
  50
  51 @keyframes container-rotate {
  52   to { transform: rotate(360deg) }
  53 }
  54
  55 .spinner-layer {
  56   position: absolute;
  57   width: 100%;
  58   height: 100%;
  59   opacity: 0;
  60 }
  61
  62 .blue {
  63   border-color: #4285f4;
  64 }
  65
  66 .red {
  67   border-color: #db4437;
  68 }
  69
  70 .yellow {
  71   border-color: #f4b400;
  72 }
  73
  74 .green {
  75   border-color: #0f9d58;
  76 }
  77
  78 /**
  79  * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
  80  *
  81  * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
  82  * guarantee that the animation will start _exactly_ after that value. So we avoid using
  83  * animation-delay and instead set custom keyframes for each color (as redundant as it
  84  * seems).
  85  *
  86  * We write out each animation in full (instead of separating animation-name,
  87  * animation-duration, etc.) because under the polyfill, Safari does not recognize those
  88  * specific properties properly, treats them as -webkit-animation, and overrides the
  89  * other animation rules. See https://github.com/Polymer/platform/issues/53.
  90  */
  91 .active .spinner-layer.blue {
  92   /* durations: 4 * ARCTIME */
  93   -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  94   animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  95 }
  96
  97 .active .spinner-layer.red {
  98   /* durations: 4 * ARCTIME */
  99   -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 100   animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 101 }
 102
 103 .active .spinner-layer.yellow {
 104   /* durations: 4 * ARCTIME */
 105   -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 106   animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 107 }
 108
 109 .active .spinner-layer.green {
 110   /* durations: 4 * ARCTIME */
 111   -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 112   animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 113 }
 114
 115 @-webkit-keyframes fill-unfill-rotate {
 116   12.5% { -webkit-transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
 117   25%   { -webkit-transform: rotate(270deg);  } /* 1   * ARCSIZE */
 118   37.5% { -webkit-transform: rotate(405deg);  } /* 1.5 * ARCSIZE */
 119   50%   { -webkit-transform: rotate(540deg);  } /* 2   * ARCSIZE */
 120   62.5% { -webkit-transform: rotate(675deg);  } /* 2.5 * ARCSIZE */
 121   75%   { -webkit-transform: rotate(810deg);  } /* 3   * ARCSIZE */
 122   87.5% { -webkit-transform: rotate(945deg);  } /* 3.5 * ARCSIZE */
 123   to    { -webkit-transform: rotate(1080deg); } /* 4   * ARCSIZE */
 124 }
 125
 126 @keyframes fill-unfill-rotate {
 127   12.5% { transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
 128   25%   { transform: rotate(270deg);  } /* 1   * ARCSIZE */
 129   37.5% { transform: rotate(405deg);  } /* 1.5 * ARCSIZE */
 130   50%   { transform: rotate(540deg);  } /* 2   * ARCSIZE */
 131   62.5% { transform: rotate(675deg);  } /* 2.5 * ARCSIZE */
 132   75%   { transform: rotate(810deg);  } /* 3   * ARCSIZE */
 133   87.5% { transform: rotate(945deg);  } /* 3.5 * ARCSIZE */
 134   to    { transform: rotate(1080deg); } /* 4   * ARCSIZE */
 135 }
 136
 137 @-webkit-keyframes blue-fade-in-out {
 138   from { opacity: 1; }
 139   25% { opacity: 1; }
 140   26% { opacity: 0; }
 141   89% { opacity: 0; }
 142   90% { opacity: 1; }
 143   100% { opacity: 1; }
 144 }
 145
 146 @keyframes blue-fade-in-out {
 147   from { opacity: 1; }
 148   25% { opacity: 1; }
 149   26% { opacity: 0; }
 150   89% { opacity: 0; }
 151   90% { opacity: 1; }
 152   100% { opacity: 1; }
 153 }
 154
 155 @-webkit-keyframes red-fade-in-out {
 156   from { opacity: 0; }
 157   15% { opacity: 0; }
 158   25% { opacity: 1; }
 159   50% { opacity: 1; }
 160   51% { opacity: 0; }
 161 }
 162
 163 @keyframes red-fade-in-out {
 164   from { opacity: 0; }
 165   15% { opacity: 0; }
 166   25% { opacity: 1; }
 167   50% { opacity: 1; }
 168   51% { opacity: 0; }
 169 }
 170
 171 @-webkit-keyframes yellow-fade-in-out {
 172   from { opacity: 0; }
 173   40% { opacity: 0; }
 174   50% { opacity: 1; }
 175   75% { opacity: 1; }
 176   76% { opacity: 0; }
 177 }
 178
 179 @keyframes yellow-fade-in-out {
 180   from { opacity: 0; }
 181   40% { opacity: 0; }
 182   50% { opacity: 1; }
 183   75% { opacity: 1; }
 184   76% { opacity: 0; }
 185 }
 186
 187 @-webkit-keyframes green-fade-in-out {
 188   from { opacity: 0; }
 189   65% { opacity: 0; }
 190   75% { opacity: 1; }
 191   90% { opacity: 1; }
 192   100% { opacity: 0; }
 193 }
 194
 195 @keyframes green-fade-in-out {
 196   from { opacity: 0; }
 197   65% { opacity: 0; }
 198   75% { opacity: 1; }
 199   90% { opacity: 1; }
 200   100% { opacity: 0; }
 201 }
 202
 203 /**
 204  * Patch the gap that appear between the two adjacent div.circle-clipper while the
 205  * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
 206  */
 207 .gap-patch {
 208   position: absolute;
 209   box-sizing: border-box;
 210   top: 0;
 211   left: 45%;
 212   width: 10%;
 213   height: 100%;
 214   overflow: hidden;
 215   border-color: inherit;
 216 }
 217
 218 .gap-patch .circle {
 219   width: 1000%;
 220   left: -450%;
 221 }
 222
 223 .circle-clipper {
 224   display: inline-block;
 225   position: relative;
 226   width: 50%;
 227   height: 100%;
 228   overflow: hidden;
 229   border-color: inherit;
 230 }
 231
 232 .circle-clipper .circle {
 233   width: 200%;
 234 }
 235
 236 .circle {
 237   box-sizing: border-box;
 238   height: 100%;
 239   border-width: 3px; /* STROKEWIDTH */
 240   border-style: solid;
 241   border-color: inherit;
 242   border-bottom-color: transparent !important;
 243   border-radius: 50%;
 244   -webkit-animation: none;
 245   animation: none;
 246 }
 247
 248 .circle-clipper.left .circle {
 249   border-right-color: transparent !important;
 250   -webkit-transform: rotate(129deg);
 251   transform: rotate(129deg);
 252 }
 253
 254 .circle-clipper.right .circle {
 255   left: -100%;
 256   border-left-color: transparent !important;
 257   -webkit-transform: rotate(-129deg);
 258   transform: rotate(-129deg);
 259 }
 260
 261 .active .circle-clipper.left .circle {
 262   /* duration: ARCTIME */
 263   -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 264   animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 265 }
 266
 267 .active .circle-clipper.right .circle {
 268   /* duration: ARCTIME */
 269   -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 270   animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
 271 }
 272
 273 @-webkit-keyframes left-spin {
 274   from { -webkit-transform: rotate(130deg); }
 275   50% { -webkit-transform: rotate(-5deg); }
 276   to { -webkit-transform: rotate(130deg); }
 277 }
 278
 279 @keyframes left-spin {
 280   from { transform: rotate(130deg); }
 281   50% { transform: rotate(-5deg); }
 282   to { transform: rotate(130deg); }
 283 }
 284
 285 @-webkit-keyframes right-spin {
 286   from { -webkit-transform: rotate(-130deg); }
 287   50% { -webkit-transform: rotate(5deg); }
 288   to { -webkit-transform: rotate(-130deg); }
 289 }
 290
 291 @keyframes right-spin {
 292   from { transform: rotate(-130deg); }
 293   50% { transform: rotate(5deg); }
 294   to { transform: rotate(-130deg); }
 295 }
 296
 297 #spinnerContainer.cooldown {
 298   /* duration: SHRINK_TIME */
 299   -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
 300   animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
 301 }
 302
 303 @-webkit-keyframes fade-out {
 304   from { opacity: 1; }
 305   to { opacity: 0; }
 306 }
 307
 308 @keyframes fade-out {
 309   from { opacity: 1; }
 310   to { opacity: 0; }
 311 }