SOURCE CODE: Basic Progress Bar
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Basic Progress Bar | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta name="keywords" content="animation widget Uize.Widget.Bar.Progress"/>
  <meta name="description" content="Ever needed a progress bar for your Ajax applications to show that requests are busy and how much longer they may take? This demo will show you how."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="document-title">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
  Basic Progress Bar
  <div id="page-actions" class="pageActions">
    <a href="source-code/progress-bar.html" class="buttonLink">SOURCE</a>
  </div>
</h1>

<div class="main">
  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of <a href="../reference/Uize.Widget.Bar.Progress.html"><code>Uize.Widget.Bar.Progress</code></a> is being used to provide crude feedback on the progress of a task of indeterminate length (such as an AJAX request). To simulate the start of the task, click the button. The progress indicator appears and a JavaScript animation is used to begin animating the estimated progress. To simulate the completion of the task, click the button again. The progress indicator will indicate that the task is complete and then disappear after a brief delay. This gives the user a positive confirmation signal that the task has completed.</p>

    <p>Over the course of multiple simulated tasks, the progress bar will aggregate the task time and attempt to become more accurate at estimating time for the next task and update its animation speed accordingly. When used with AJAX applications, this can help the progress indicator to tune itself to connection speed and load factors for the application.</p>
  </div>

  <!-- progress bar UI -->

  <div style="text-align:center;">
    <a id="page-toggleInProgress" href="javascript://" class="buttonLink">START TASK</a>
  </div>

  <br/>
  <br/>

  <center id="page_progressBar-shell"></center>
</div>

<!-- JavaScript code to make the static progress bar HTML "come alive" -->

<script type="text/javascript">

Uize.module ({
  required:[
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.Bar.Progress'
  ],
  builder:function () {
    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** add the progress bar child widget ***/
      page.addChild (
        'progressBar',
        Uize.Widget.Bar.Progress,
        {
          paddingFactor:1,
          built:false
        }
      );

    /*** wire up the link to start/stop the progress bar ***/
      page.wireNode (
        'toggleInProgress',
        'click',
        function () {
          page.setNodeInnerHtml (
            'toggleInProgress',
            (page.children.progressBar.toggle ('inProgress') ? 'STOP' : 'START') + ' TASK'
          );
        }
      );

    /*** wire up the page widget ***/
      page.wireUi ();
  }
});

</script>

</body>
</html>
SOURCE CODE: Basic Progress Bar VIEW EXAMPLE

SOURCE CODE: Basic Progress Bar
VIEW EXAMPLE
