Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

54 lines (50 sloc) 1.548 kb
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Indeterminate Value</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.3.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.progressbar.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: false
});
$( "button" ).on( "click", function( event ) {
var target = $( event.target ),
pbar = $( "#progressbar" ),
pbarValue = pbar.find( ".ui-progressbar-value" );
if ( target.is( "#numButton" ) ) {
pbar.progressbar( "option", {
value: Math.floor( Math.random() * 100 )
});
} else if ( target.is( "#colorButton" ) ) {
pbarValue.css({
"background": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
});
} else if ( target.is( "#falseButton" ) ) {
pbar.progressbar( "option", "value", false );
}
});
});
</script>
<style>
#progressbar .ui-progressbar-value {
background-color: #CCCCCC;
}
</style>
</head>
<body>
<div id="progressbar"></div>
<button id="numButton">Random Value - Determinate</button>
<button id="falseButton">Indeterminate</button>
<button id="colorButton">Random Color</button>
<div class="demo-description">
<p>Indeterminate progress bar and switching between determinate and indeterminate styles.</p>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.