examples/simple-widgets/progress-bar.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2 "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4     <head>
   5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6         <title>
   7             ProgressBar
   8         </title>
   9         <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
  10         <link rel="stylesheet" type="text/css" href="progress-bar.css">
  11         <link rel="stylesheet" type="text/css" href="../shared/example.css">
  12         <script type="text/javascript" src="../../bootstrap.js">
  13 </script>
  14         <script type="text/javascript" src="progress-bar.js">
  15 </script>
  16         <style type="text/css">
  17 p {
  18                 margin: 20px;
  19             }
  20         </style>
  21     </head>
  22     <body>
  23         <h1>
  24             Progress Bar
  25         </h1>
  26         <p>
  27             The example shows how to use the ProgressBar class. The js is not minified so it is readable. See <a href="progress-bar.js">progress-bar.js</a>.
  28         </p>
  29         <p>
  30             <b>Basic Progress Bar:</b> Deferred rendering, dynamic show/hide and built-in progress text: <button id="btn1">Show</button><br>
  31         </p>
  32         <div class="status" id="p1text">
  33             Nothing to see here.
  34         </div>
  35         <div id="p1" style="width:300px;"></div>
  36         <p>
  37             <b>Additional Options:</b> Rendered on page load, left-aligned text and % width: <button id="btn2">Show</button><br>
  38         </p>
  39         <div id="p2" style="width:50%;"></div>
  40         <p>
  41             <b>Waiting Bar:</b> Wait for a long operation to complete (example will stop after 5 secs): <button id="btn3">Show</button><br>
  42         </p>
  43         <div id="p3"></div>
  44         <p>
  45             <span class="status" id="p3text">Ready</span>
  46         </p>
  47         <p>
  48             <b>Custom Styles:</b> Rendered like Windows XP with custom progress text element: <button id="btn4">Show</button><br>
  49         </p>
  50         <div id="p4" style="width:300px;"></div>
  51         <div class="status">
  52             <b>Status:</b> <span id="p4text"></span>
  53         </div>
  54     </body>
  55 </html>