| Index: third_party/polymer/v0_8/components-chromium/paper-progress/paper-progress.html
|
| diff --git a/third_party/polymer/v0_8/components-chromium/paper-progress/paper-progress.html b/third_party/polymer/v0_8/components-chromium/paper-progress/paper-progress.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..9db71022d80498c124d784aed0ffc374ac6462a6
|
| --- /dev/null
|
| +++ b/third_party/polymer/v0_8/components-chromium/paper-progress/paper-progress.html
|
| @@ -0,0 +1,125 @@
|
| +<!--
|
| +@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
|
| +The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
| +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
| +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
|
| +--><html><head><link rel="import" href="../paper-styles/paper-styles.html">
|
| +<link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
|
| +<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
|
| +
|
| +<!--
|
| +The progress bars are for situations where the percentage completed can be
|
| +determined. They give users a quick sense of how much longer an operation
|
| +will take.
|
| +
|
| +Example:
|
| +
|
| + <paper-progress value="10"></paper-progress>
|
| +
|
| +There is also a secondary progress which is useful for displaying intermediate
|
| +progress, such as the buffer level during a streaming playback progress bar.
|
| +
|
| +Example:
|
| +
|
| + <paper-progress value="10" secondary-progress="30"></paper-progress>
|
| +
|
| +Styling progress bar:
|
| +
|
| +To change the active progress bar color:
|
| +
|
| + paper-progress {
|
| + --paper-progress-active-color: #e91e63;
|
| + }
|
| +
|
| +To change the secondary progress bar color:
|
| +
|
| + paper-progress {
|
| + --paper-progress-secondary-color: #f8bbd0;
|
| + }
|
| +
|
| +To change the progress bar background color:
|
| +
|
| + paper-progress {
|
| + --paper-progress-container-color: #64ffda;
|
| + }
|
| +
|
| +@group Paper Elements
|
| +@element paper-progress
|
| +@hero hero.svg
|
| +@demo demo/index.html
|
| +-->
|
| +
|
| +</head><body><dom-module id="paper-progress">
|
| + <style>
|
| + :host {
|
| + display: inline-block;
|
| + width: 200px;
|
| + height: 4px;
|
| + }
|
| +
|
| + #progressContainer {
|
| + position: relative;
|
| + height: 100%;
|
| + background-color: var(--paper-progress-container-color, --google-grey-300);
|
| + overflow: hidden;
|
| + }
|
| +
|
| + #activeProgress,
|
| + #secondaryProgress {
|
| + -webkit-transform-origin: left center;
|
| + transform-origin: left center;
|
| + -webkit-transform: scaleX(0);
|
| + transform: scaleX(0);
|
| + }
|
| +
|
| + #activeProgress {
|
| + background-color: var(--paper-progress-active-color, --google-green-500);
|
| + }
|
| +
|
| + #secondaryProgress {
|
| + background-color: var(--paper-progress-secondary-color, --google-green-100);
|
| + }
|
| +
|
| + #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);
|
| + }
|
| + }
|
| + </style>
|
| + <template>
|
| + <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>
|
| + </template>
|
| +</dom-module>
|
| +
|
| +<script src="paper-progress-extracted.js"></script></body></html>
|
|
|
Chromium Code Reviews
Issue 1162563004:
Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master