demos/tizen-winsets/widgets/progressbar.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
   5                 <script src="../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
   6                 <script src="../configure.js"></script>
   7                 <script src="../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
   8                 <script src="../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
   9                                 data-framework-theme="tizen-white"
  10                                 data-framework-viewport-width="device-width">
  11                 </script>
  12                 <script src="../main.js"></script>
  13                 <title>Tizen UI - Checkbox</title>
  14
  15                 <!-- for compatibility test -->
  16                 <meta name="apple-mobile-web-app-capable" content="yes" />
  17                 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  18                 <link rel="apple-touch-icon" href="../icon-tizen.png" />
  19         </head>
  20         <body>
  21                 <div data-role="page" id="progressbar-demo" data-add-back-btn="true">
  22                         <div data-role="header" data-position="fixed">
  23                                 <h1>PROGRESS BAR</h1>
  24                         </div>
  25                         <div data-role="content">
  26                                 <ul data-role="listview">
  27                                         <li data-role="list-divider">PROGRESS BAR</li>
  28                                         <li>When you click progress bar, it starts updating values...</li>
  29                                         <li id="progressbarTest" ><div data-role="progressbar" id="progressbar"></div></li>
  30
  31                                         <li data-role="list-divider">PROGESS PENDING</li>
  32                                         <li id="pendingTest" ><div data-role="progress" data-style="pending" id="pending"></div></li>
  33
  34                                         <li data-role="list-divider">PROGRESS ~ING</li>
  35                                         <li id="progressingTest" >
  36                                                 <div data-role="progress" data-style="circle" id="progressing" style="right:10px"></div>
  37                                                 Loading..
  38                                         </li>
  39                                 </ul>
  40                         </div> <!-- /content -->
  41                         <div data-role="footer">
  42                         </div>
  43                         <script src="progressbar.js"></script>
  44                 </div> <!-- /page -->
  45         </body>
  46 </html>