<!--
/*
* testLoadProgress.html
*
* @(#) $Id: testSmoothProgressBar.html,v 1.4 2012/11/09 06:06:25 mlemos Exp $
*
*/
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>Test the Smooth Progress Bar Object</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* { font-family: sans-serif,arial,helvetica }
.container
{
border-style: solid ;
border-top-color: #dddddd ;
border-left-color: #dddddd ;
border-bottom-color: #808080 ;
border-right-color: #808080 ;
border-width: 1px ;
border-radius: 8px ;
-moz-border-radius: 8px;
padding: 4px;
}
.bar
{
border-radius: 8px ;
-moz-border-radius: 8px;
}
.value
{
text-shadow: 0px 5px 9px #000000;
}
</style>
<script type="text/javascript" src="smoothProgressBar.js"></script>
</head>
<body>
<script type="text/javascript"><!--
/*
* Create the smooth progress bar object
*/
var pb = new ML.content.smoothProgressBar();
/*
* Enable debug support to see what may be wrong
*/
pb.debug = true;
pb.containerStyle = 'position: absolute; width: 400px; text-align: center;';
pb.containerClass = 'container';
pb.barStyle = 'background-color: #007fff; padding: 2px;';
pb.barClass = 'bar';
pb.barValueStyle = '';
pb.barValueClass = 'value';
pb.current = 0;
pb.total = 100;
pb.progressTemplate = '{progress}%';
/*
* Open the progress bar
*/
pb.openBar({});
progress = 0;
pb.setProgress(progress);
function updateProgress()
{
if(progress < 100)
{
progress += 10;
pb.setProgress(progress);
setTimeout('updateProgress()', 1000);
}
else
{
alert('Done!');
pb.closeBar();
}
}
setTimeout('updateProgress()', 1000);
// --></script>
</body>
</html>
|
Download
