| Index: third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress.html
|
| diff --git a/third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress.html b/third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress.html
|
| index 6076a648f46cfb98492978ff1f3f803cb1990d2a..9a0e813c7ab1c6585c22594ac50a6e33aa2dd5be 100644
|
| --- a/third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress.html
|
| +++ b/third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress.html
|
| @@ -56,6 +56,17 @@ the value changed. You can also customize the transition:
|
| --paper-progress-transition-transition-delay: 0s;
|
| }
|
|
|
| +The following mixins are available for styling:
|
| +
|
| +
|
| +
|
| +Custom property | Description | Default
|
| +----------------|-------------|----------
|
| +`--paper-progress-container` | Mixin applied to container | `{}`
|
| +
|
| +
|
| +
|
| +
|
| @group Paper Elements
|
| @element paper-progress
|
| @hero hero.svg
|
| @@ -91,8 +102,12 @@ the value changed. You can also customize the transition:
|
| #progressContainer {
|
| position: relative;
|
| height: 100%;
|
| - background-color: var(--paper-progress-container-color, --google-grey-300);
|
| overflow: hidden;
|
| + @apply(--paper-progress-container);
|
| + }
|
| +
|
| + #progressContainer, #indeterminateSplitter {
|
| + background-color: var(--paper-progress-container-color, --google-grey-300);
|
| }
|
|
|
| #activeProgress,
|
| @@ -110,35 +125,87 @@ the value changed. You can also customize the transition:
|
| #secondaryProgress {
|
| background-color: var(--paper-progress-secondary-color, --google-green-100);
|
| }
|
| +
|
| + #indeterminateSplitter {
|
| + display: none;
|
| + }
|
|
|
| #activeProgress.indeterminate {
|
| + -webkit-transform-origin: right center;
|
| + transform-origin: right center;
|
| + -webkit-animation: indeterminate-bar 2s linear infinite;
|
| + animation: indeterminate-bar 2s linear infinite;
|
| + }
|
| +
|
| + #indeterminateSplitter.indeterminate {
|
| + display: block;
|
| -webkit-transform-origin: center center;
|
| transform-origin: center center;
|
| - -webkit-animation: indeterminate-bar 1s linear infinite;
|
| - animation: indeterminate-bar 1s linear infinite;
|
| + -webkit-animation: indeterminate-splitter 2s linear infinite;
|
| + animation: indeterminate-splitter 2s linear infinite;
|
| }
|
|
|
| @-webkit-keyframes indeterminate-bar {
|
| 0% {
|
| - -webkit-transform: translate(-50%) scaleX(0);
|
| + -webkit-transform: scaleX(1) translateX(-100%);
|
| }
|
| 50% {
|
| - -webkit-transform: translate(0%) scaleX(0.3);
|
| + -webkit-transform: scaleX(1) translateX(0%);
|
| + }
|
| + 75% {
|
| + -webkit-transform: scaleX(1) translateX(0%);
|
| + -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);
|
| }
|
| 100% {
|
| - -webkit-transform: translate(50%) scaleX(0);
|
| + -webkit-transform: scaleX(0) translateX(0%);
|
| + }
|
| + }
|
| +
|
| + @-webkit-keyframes indeterminate-splitter {
|
| + 0% {
|
| + -webkit-transform: scaleX(.75) translateX(-125%);
|
| + }
|
| + 30% {
|
| + -webkit-transform: scaleX(.75) translateX(-125%);
|
| + -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
|
| + }
|
| + 90% {
|
| + -webkit-transform: scaleX(.75) translateX(125%);
|
| + }
|
| + 100% {
|
| + -webkit-transform: scaleX(.75) translateX(125%);
|
| }
|
| }
|
|
|
| @keyframes indeterminate-bar {
|
| 0% {
|
| - transform: translate(-50%) scaleX(0);
|
| + transform: scaleX(1) translateX(-100%);
|
| }
|
| 50% {
|
| - transform: translate(0%) scaleX(0.3);
|
| + transform: scaleX(1) translateX(0%);
|
| + }
|
| + 75% {
|
| + transform: scaleX(1) translateX(0%);
|
| + animation-timing-function: cubic-bezier(.28,.62,.37,.91);
|
| + }
|
| + 100% {
|
| + transform: scaleX(0) translateX(0%);
|
| + }
|
| + }
|
| +
|
| + @keyframes indeterminate-splitter {
|
| + 0% {
|
| + transform: scaleX(.75) translateX(-125%);
|
| + }
|
| + 30% {
|
| + transform: scaleX(.75) translateX(-125%);
|
| + animation-timing-function: cubic-bezier(.42,0,.6,.8);
|
| + }
|
| + 90% {
|
| + transform: scaleX(.75) translateX(125%);
|
| }
|
| 100% {
|
| - transform: translate(50%) scaleX(0);
|
| + transform: scaleX(.75) translateX(125%);
|
| }
|
| }
|
| </style>
|
| @@ -146,6 +213,7 @@ the value changed. You can also customize the transition:
|
| <div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
|
| <div id="secondaryProgress" class="fit"></div>
|
| <div id="activeProgress" class="fit"></div>
|
| + <div id="indeterminateSplitter" class="fit"></div>
|
| </div>
|
| </template>
|
| </dom-module>
|
|
|