File: testSmoothProgressBar.html

Recommend this page to a friend!
  Classes of Manuel Lemos   Smooth Progress Bar   testSmoothProgressBar.html   Download  
File: testSmoothProgressBar.html
Role: Example script
Content type: text/plain
Description: Smooth progress bar example
Class: Smooth Progress Bar
Progress bar that updates its size smoothly
Author: By
Last change: Fixed JSHint complaints.
Renamed the class and Style variables to containerClass and containerStyle.
Date: 10 years ago
Size: 1,712 bytes
 

Contents

Class file image Download
<!-- /* * 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>