| <!-- |
| @license |
| Copyright (c) 2015 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 |
| --> |
| |
| <dom-module id="paper-spinner-styles"> |
| <template> |
| <style> |
| /* |
| /**************************/ |
| /* STYLES FOR THE SPINNER */ |
| /**************************/ |
| |
| /* |
| * Constants: |
| * ARCSIZE = 270 degrees (amount of circle the arc takes up) |
| * ARCTIME = 1333ms (time it takes to expand and contract arc) |
| * ARCSTARTROT = 216 degrees (how much the start location of the arc |
| * should rotate each time, 216 gives us a |
| * 5 pointed star shape (it's 360/5 * 3). |
| * For a 7 pointed star, we might do |
| * 360/7 * 3 = 154.286) |
| * SHRINK_TIME = 400ms |
| */ |
| |
| :host { |
| display: inline-block; |
| position: relative; |
| width: 28px; |
| height: 28px; |
| |
| /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ |
| --paper-spinner-container-rotation-duration: 1568ms; |
| |
| /* ARCTIME */ |
| --paper-spinner-expand-contract-duration: 1333ms; |
| |
| /* 4 * ARCTIME */ |
| --paper-spinner-full-cycle-duration: 5332ms; |
| |
| /* SHRINK_TIME */ |
| --paper-spinner-cooldown-duration: 400ms; |
| } |
| |
| #spinnerContainer { |
| width: 100%; |
| height: 100%; |
| |
| /* The spinner does not have any contents that would have to be |
| * flipped if the direction changes. Always use ltr so that the |
| * style works out correctly in both cases. */ |
| direction: ltr; |
| } |
| |
| #spinnerContainer.active { |
| -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite; |
| animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite; |
| } |
| |
| @-webkit-keyframes container-rotate { |
| to { -webkit-transform: rotate(360deg) } |
| } |
| |
| @keyframes container-rotate { |
| to { transform: rotate(360deg) } |
| } |
| |
| .spinner-layer { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| opacity: 0; |
| white-space: nowrap; |
| border-color: var(--paper-spinner-color, --google-blue-500); |
| } |
| |
| .layer-1 { |
| border-color: var(--paper-spinner-layer-1-color, --google-blue-500); |
| } |
| |
| .layer-2 { |
| border-color: var(--paper-spinner-layer-2-color, --google-red-500); |
| } |
| |
| .layer-3 { |
| border-color: var(--paper-spinner-layer-3-color, --google-yellow-500); |
| } |
| |
| .layer-4 { |
| border-color: var(--paper-spinner-layer-4-color, --google-green-500); |
| } |
| |
| /** |
| * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): |
| * |
| * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't |
| * guarantee that the animation will start _exactly_ after that value. So we avoid using |
| * animation-delay and instead set custom keyframes for each color (as layer-2undant as it |
| * seems). |
| */ |
| .active .spinner-layer { |
| -webkit-animation-name: fill-unfill-rotate; |
| -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); |
| -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| -webkit-animation-iteration-count: infinite; |
| animation-name: fill-unfill-rotate; |
| animation-duration: var(--paper-spinner-full-cycle-duration); |
| animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| animation-iteration-count: infinite; |
| opacity: 1; |
| } |
| |
| .active .spinner-layer.layer-1 { |
| -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; |
| animation-name: fill-unfill-rotate, layer-1-fade-in-out; |
| } |
| |
| .active .spinner-layer.layer-2 { |
| -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; |
| animation-name: fill-unfill-rotate, layer-2-fade-in-out; |
| } |
| |
| .active .spinner-layer.layer-3 { |
| -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; |
| animation-name: fill-unfill-rotate, layer-3-fade-in-out; |
| } |
| |
| .active .spinner-layer.layer-4 { |
| -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; |
| animation-name: fill-unfill-rotate, layer-4-fade-in-out; |
| } |
| |
| @-webkit-keyframes fill-unfill-rotate { |
| 12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */ |
| 25% { -webkit-transform: rotate(270deg) } /* 1 * ARCSIZE */ |
| 37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */ |
| 50% { -webkit-transform: rotate(540deg) } /* 2 * ARCSIZE */ |
| 62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */ |
| 75% { -webkit-transform: rotate(810deg) } /* 3 * ARCSIZE */ |
| 87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */ |
| to { -webkit-transform: rotate(1080deg) } /* 4 * ARCSIZE */ |
| } |
| |
| @keyframes fill-unfill-rotate { |
| 12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */ |
| 25% { transform: rotate(270deg) } /* 1 * ARCSIZE */ |
| 37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */ |
| 50% { transform: rotate(540deg) } /* 2 * ARCSIZE */ |
| 62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */ |
| 75% { transform: rotate(810deg) } /* 3 * ARCSIZE */ |
| 87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */ |
| to { transform: rotate(1080deg) } /* 4 * ARCSIZE */ |
| } |
| |
| @-webkit-keyframes layer-1-fade-in-out { |
| 0% { opacity: 1 } |
| 25% { opacity: 1 } |
| 26% { opacity: 0 } |
| 89% { opacity: 0 } |
| 90% { opacity: 1 } |
| to { opacity: 1 } |
| } |
| |
| @keyframes layer-1-fade-in-out { |
| 0% { opacity: 1 } |
| 25% { opacity: 1 } |
| 26% { opacity: 0 } |
| 89% { opacity: 0 } |
| 90% { opacity: 1 } |
| to { opacity: 1 } |
| } |
| |
| @-webkit-keyframes layer-2-fade-in-out { |
| 0% { opacity: 0 } |
| 15% { opacity: 0 } |
| 25% { opacity: 1 } |
| 50% { opacity: 1 } |
| 51% { opacity: 0 } |
| to { opacity: 0 } |
| } |
| |
| @keyframes layer-2-fade-in-out { |
| 0% { opacity: 0 } |
| 15% { opacity: 0 } |
| 25% { opacity: 1 } |
| 50% { opacity: 1 } |
| 51% { opacity: 0 } |
| to { opacity: 0 } |
| } |
| |
| @-webkit-keyframes layer-3-fade-in-out { |
| 0% { opacity: 0 } |
| 40% { opacity: 0 } |
| 50% { opacity: 1 } |
| 75% { opacity: 1 } |
| 76% { opacity: 0 } |
| to { opacity: 0 } |
| } |
| |
| @keyframes layer-3-fade-in-out { |
| 0% { opacity: 0 } |
| 40% { opacity: 0 } |
| 50% { opacity: 1 } |
| 75% { opacity: 1 } |
| 76% { opacity: 0 } |
| to { opacity: 0 } |
| } |
| |
| @-webkit-keyframes layer-4-fade-in-out { |
| 0% { opacity: 0 } |
| 65% { opacity: 0 } |
| 75% { opacity: 1 } |
| 90% { opacity: 1 } |
| to { opacity: 0 } |
| } |
| |
| @keyframes layer-4-fade-in-out { |
| 0% { opacity: 0 } |
| 65% { opacity: 0 } |
| 75% { opacity: 1 } |
| 90% { opacity: 1 } |
| to { opacity: 0 } |
| } |
| |
| .circle-clipper { |
| display: inline-block; |
| position: relative; |
| width: 50%; |
| height: 100%; |
| overflow: hidden; |
| border-color: inherit; |
| } |
| |
| /** |
| * Patch the gap that appear between the two adjacent div.circle-clipper while the |
| * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge). |
| */ |
| .spinner-layer::after { |
| left: 45%; |
| width: 10%; |
| border-top-style: solid; |
| } |
| |
| .spinner-layer::after, |
| .circle-clipper::after { |
| content: ''; |
| box-sizing: border-box; |
| position: absolute; |
| top: 0; |
| border-width: var(--paper-spinner-stroke-width, 3px); |
| border-color: inherit; |
| border-radius: 50%; |
| } |
| |
| .circle-clipper::after { |
| bottom: 0; |
| width: 200%; |
| border-style: solid; |
| border-bottom-color: transparent !important; |
| } |
| |
| .circle-clipper.left::after { |
| left: 0; |
| border-right-color: transparent !important; |
| -webkit-transform: rotate(129deg); |
| transform: rotate(129deg); |
| } |
| |
| .circle-clipper.right::after { |
| left: -100%; |
| border-left-color: transparent !important; |
| -webkit-transform: rotate(-129deg); |
| transform: rotate(-129deg); |
| } |
| |
| .active .gap-patch::after, |
| .active .circle-clipper::after { |
| -webkit-animation-duration: var(--paper-spinner-expand-contract-duration); |
| -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| -webkit-animation-iteration-count: infinite; |
| animation-duration: var(--paper-spinner-expand-contract-duration); |
| animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| animation-iteration-count: infinite; |
| } |
| |
| .active .circle-clipper.left::after { |
| -webkit-animation-name: left-spin; |
| animation-name: left-spin; |
| } |
| |
| .active .circle-clipper.right::after { |
| -webkit-animation-name: right-spin; |
| animation-name: right-spin; |
| } |
| |
| @-webkit-keyframes left-spin { |
| 0% { -webkit-transform: rotate(130deg) } |
| 50% { -webkit-transform: rotate(-5deg) } |
| to { -webkit-transform: rotate(130deg) } |
| } |
| |
| @keyframes left-spin { |
| 0% { transform: rotate(130deg) } |
| 50% { transform: rotate(-5deg) } |
| to { transform: rotate(130deg) } |
| } |
| |
| @-webkit-keyframes right-spin { |
| 0% { -webkit-transform: rotate(-130deg) } |
| 50% { -webkit-transform: rotate(5deg) } |
| to { -webkit-transform: rotate(-130deg) } |
| } |
| |
| @keyframes right-spin { |
| 0% { transform: rotate(-130deg) } |
| 50% { transform: rotate(5deg) } |
| to { transform: rotate(-130deg) } |
| } |
| |
| #spinnerContainer.cooldown { |
| -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1); |
| animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1); |
| } |
| |
| @-webkit-keyframes fade-out { |
| 0% { opacity: 1 } |
| to { opacity: 0 } |
| } |
| |
| @keyframes fade-out { |
| 0% { opacity: 1 } |
| to { opacity: 0 } |
| } |
| </style> |
| </template> |
| </dom-module> |