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 http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <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="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

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

  <!-- 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 id="page-startStopButton" style="text-align:center; margin-bottom: 20px;"></div>

  <center id="page-progressBar"></center>
</div>

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

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.Bar.Progress',
    'Uize.Widgets.Button.Widget'
  ],
  function () {
    'use strict';

    /*** 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
        }
      );

    /*** add the start/stop button ***/
      page.addChild (
        'startStopButton',
        Uize.Widgets.Button.Widget,
        {
          text:'START TASK',
          action:function () {
            this.set ({text:(page.children.progressBar.toggle ('inProgress') ? 'STOP' : 'START') + ' TASK'});
          },
          built:false
        }
      );

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

</script>

</body>
</html>