third_party/polymer/components-chromium/core-ajax/demo-progress.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../webcomponentsjs/webcomponents.js" debug></script>
   5   <meta charset="utf-8">
   6   <title>Race condition</title>
   7 </head>
   8 <body>
   9   <link rel="import" href="core-ajax.html">
  10   <link rel="import" href="../paper-progress/paper-progress.html">
  11   <polymer-element name="progress-test">
  12     <template>
  13       <core-ajax
  14           id="ajax" auto
  15           url="http://httpbin.org/drip"
  16           params="{{ {numbytes: numbytes, duration:5} }}"
  17           response="{{response}}"
  18           progress="{{progress}}"
  19           loading="{{loading}}"
  20           ></core-ajax>
  21
  22       <!--
  23         Ordinarily you'd gate on progress.lengthComputable, but we know the
  24         length in this case (and httpbin sadly doesn't return a
  25         Content-Length header for this requesthere).
  26
  27         https://github.com/kennethreitz/httpbin/pull/160
  28        -->
  29       <div>
  30         <button on-click="{{restart}}">Restart</button>
  31         <template if="{{loading}}">
  32           Loading...
  33         </template>
  34         <template if="{{!loading}}">
  35           Loaded!
  36         </template>
  37       </div>
  38       <template if="{{loading && progress.loaded}}">
  39         <paper-progress
  40             value="{{progress.loaded}}"
  41             min="0"
  42             max="{{numbytes}}">
  43         </paper-progress><br>
  44       </template>
  45     </template>
  46     <script>
  47       Polymer('progress-test', {
  48         loading: true,
  49         i: 0,
  50         numbytes: 1000,
  51         pretty: function(i) {
  52           return JSON.stringify(i, null, 2);
  53         },
  54         restart: function() {
  55           this.$.ajax.abort();
  56           this.$.ajax.go();
  57         }
  58       });
  59     </script>
  60
  61   </polymer-element>
  62
  63   <progress-test></progress-test>
  64 </body>
  65 </html>