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>iron-range-behavior demo</title> 14 15 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 16 17 <link rel="import" href="../iron-range-behavior.html"> 18 <link rel="import" href="../../iron-input/iron-input.html"> 19 20 <style> 21 22 body { 23 font-family: sans-serif; 24 } 25 26 </style> 27 </head> 28 29 <body unresolved> 30 31 <dom-module id="x-progressbar"> 32 <style> 33 :host { 34 display: block; 35 height: 40px; 36 background-color: #555; 37 border-radius: 4px; 38 padding: 8px; 39 box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.5); 40 } 41 42 .progress { 43 background-color: #999; 44 height: 100%; 45 border-radius: 4px; 46 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); 47 } 48 49 .progress-value { 50 padding: 0 8px; 51 font-size: 18px; 52 color: #fff; 53 } 54 </style> 55 <template> 56 <div class="progress" horizontal center layout style$="{{_computeStyle(ratio)}}"> 57 <div class="progress-value"><span>{{ratio}}</span>%</div> 58 </div> 59 </template> 60 </dom-module> 61 62 <script> 63 HTMLImports.whenReady(function() { 64 Polymer({ 65 is: 'x-progressbar', 66 67 behaviors: [Polymer.IronRangeBehavior], 68 69 _computeStyle: function(ratio) { 70 return 'width: ' + ratio + '%;'; 71 } 72 }); 73 }); 74 </script> 75 76 <x-progressbar min="0" max="200" value="120"></x-progressbar> 77 78 </body> 79 </html> 80
