<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Progressbar - Custom Label</title> <link rel="stylesheet" href="../../themes/base/all.css"> <link rel="stylesheet" href="../demos.css"> <style> .ui-progressbar { position: relative; } .progress-label { position: absolute; left: 50%; top: 4px; font-weight: bold; text-shadow: 1px 1px 0 #fff; } </style> <script src="../../external/requirejs/require.js"></script> <script src="../bootstrap.js"> var progressbar = $( "#progressbar" ), progressLabel = $( ".progress-label" ); progressbar.progressbar({ value: false, change: function() { progressLabel.text( progressbar.progressbar( "value" ) + "%" ); }, complete: function() { progressLabel.text( "Complete!" ); } }); function progress() { var val = progressbar.progressbar( "value" ) || 0; progressbar.progressbar( "value", val + 2 ); if ( val < 99 ) { setTimeout( progress, 80 ); } } setTimeout( progress, 2000 ); </script> </head> <body> <div id="progressbar"><div class="progress-label">Loading...</div></div> <div class="demo-description"> <p>Custom updated label demo.</p> </div> </body> </html>