Horizontal and vertical ProgressBar with image indicator


<html>
<head>
<title>DynAPI Examples - ProgressBar</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
  dynapi.library.setPath('./dynapisrc/');
  dynapi.library.include('dynapi.api');
  dynapi.library.include('ProgressBar');
</script>
<script language="Javascript">

  var hpb = new ProgressBar('horz',250,100,200,20,20);
  var vpb = new ProgressBar('vert',200,100,20,150,20);

  var ipb = new ProgressBar('horz',250,150,200,20,20);
  ipb.setLocalStyleAttribute('imageBar',dynapi.functions.getImage('./dynapiexamples/images/pbar.gif'));

  dynapi.document.addChild(hpb);
  dynapi.document.addChild(vpb);
  dynapi.document.addChild(ipb);

  var i=0;
  function startLoop(v){
    if(v!=null) i=v;
    hpb.setValue(i)
    vpb.setValue(i)
    ipb.setValue(i)
    i++;
    if(i<=100)setTimeout('startLoop()',100)
    status=hpb.getValue();
    return false;
  }

</script>
</head>
<body>
<a href="javascript:;" onclick="return startLoop(1);">Start</a>
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>

dynapi.zip( 791 k)

Related examples in the same category

1.	ProgressBar in JavaScript
2.	Progressbar fade in and fade out

Horizontal and vertical ProgressBar with image indicator : Progress Bar « Ajax Layer « JavaScript DHTML

Related examples in the same category