This is a a program that creates the progress bar with jQuery for web.
The source code for the program is following :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Progress Bar functionality</title> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> .ui-widget-header { background: coral; border: 1px solid #DDDDDD; color: #333333; font-weight: bold; } #label1{ font-size: 30px; text-align: center; } </style> <script> $(function() { $( "#progressbar" ).progressbar({ value: 0 }); var x=0; $("#button1").click(function(){ $("#label2").text("Loading..."); $("#label1").text("In Progress"); var progress = setInterval(function(){ x++; $("#label1").text(x+"%"); $("#progressbar").progressbar("option", "value", x); $("#button2").click(function(){ clearInterval(progress); $("#label2").text("Saved Progress At "+x+"%"); }) if(x==100){ clearInterval(progress); } },100); }); }); </script> </head> <body> <br><br> <div id="progressbar"></div> <h1><div id="label1"></div></div></h1> <h1><div id="label2"></div></div></h1> <button id="button1">click me to load</button> <button id="button2">Reset</button> </body> </html> 
0 Comments