1 <!-- 2 @license 3 Copyright (c) 2015 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 <!doctype html> 11 <html> 12 <head> 13 <title>paper-progress demo</title> 14 15 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 16 <meta name="mobile-web-app-capable" content="yes"> 17 <meta name="apple-mobile-web-app-capable" content="yes"> 18 19 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 20 <link rel="import" href="../../paper-styles/color.html"> 21 <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> 22 <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> 23 <link rel="import" href="../paper-progress.html"> 24 <link rel="import" href="../../paper-button/paper-button.html"> 25 26 <style is="custom-style" include="demo-pages-shared-styles"> 27 paper-progress { 28 display: block; 29 width: 100%; 30 margin: 20px 0; 31 } 32 paper-button { 33 display: inline-block; 34 padding: 5px; 35 } 36 </style> 37 38 </head> 39 <body unresolved> 40 <div class="vertical-section-container centered"> 41 <h3>paper-progress can be imperatively controlled</h3> 42 <demo-snippet class="centered-demo"> 43 <template> 44 <p>Once started, loops 5 times before stopping. 45 <!-- View the source code to see the contents of startProgress() --> 46 <paper-button raised onclick="startProgress();" id="start">Start</paper-button> 47 </p> 48 <paper-progress id="progress"></paper-progress> 49 </template> 50 </demo-snippet> 51 52 <h3>paper-progress can be indeterminate</h3> 53 <demo-snippet class="centered-demo"> 54 <template> 55 <paper-progress indeterminate></paper-progress> 56 <paper-progress indeterminate value="800" min="100" max="1000"></paper-progress> 57 </template> 58 </demo-snippet> 59 60 <h3>It can be styled using custom properties</h3> 61 <demo-snippet class="centered-demo"> 62 <template> 63 <style is="custom-style"> 64 paper-progress.blue { 65 --paper-progress-active-color: var(--paper-light-blue-500); 66 --paper-progress-secondary-color: var(--paper-light-blue-100); 67 } 68 69 paper-progress.red { 70 --paper-progress-active-color: var(--paper-red-500); 71 --paper-progress-secondary-color: var(--paper-red-100); 72 } 73 74 paper-progress.green { 75 --paper-progress-active-color: var(--paper-light-green-500); 76 --paper-progress-secondary-color: var(--paper-light-green-100); 77 } 78 </style> 79 <paper-progress value="800" min="100" max="1000" class="red"></paper-progress> 80 <paper-progress value="60" class="green"></paper-progress> 81 <paper-progress value="40" secondary-progress="80" class="blue"></paper-progress> 82 </template> 83 </demo-snippet> 84 </div> 85 86 <script> 87 var progress, button, animationFrame; 88 var repeat, maxRepeat = 5, animating = false; 89 90 function nextProgress() { 91 animating = true; 92 if (progress.value < progress.max) { 93 progress.value += (progress.step || 1); 94 } else { 95 if (++repeat >= maxRepeat) { 96 animating = false; 97 button.disabled = false; 98 return; 99 } 100 progress.value = progress.min; 101 } 102 var animationFrame = requestAnimationFrame(nextProgress); 103 } 104 105 function startProgress() { 106 repeat = 0; 107 progress.value = progress.min; 108 button.disabled = true; 109 if (!animating) { 110 nextProgress(); 111 } 112 } 113 114 window.addEventListener('WebComponentsReady', function() { 115 progress = document.querySelector('paper-progress'); 116 button = document.querySelector('paper-button'); 117 }); 118 119 </script> 120 121 </body> 122 </html> 123
