HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Display a certain process or state of uncertainty.
For more details about progressbar member, see the API documentation progress bar member (Progressbar the Widget) .
The default is determined progress bar.
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI progress bar (Progressbar) - The default function </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "https://jqueryui.com/resources/demos/style.css"> <Script> $ (Function () { $ ( "#progressbar") .progressbar ({ value: 37 }); }); </ Script> </ Head> <Body> <Div id = "progressbar"> </ div> </ Body> </ Html>
Custom update label.
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI progress bar (Progressbar) - Custom Tab </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "https://jqueryui.com/resources/demos/style.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> $ (Function () { 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 + 1); if (val <99) { setTimeout (progress, 100); } } setTimeout (progress, 3000); }); </ Script> </ Head> <Body> <Div id = "progressbar"> <div class = "progress-label"> Loading /en. </ div> </ div> </ Body> </ Html>
Indeterminate progress bar, and can switch between certain and uncertain style.
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI progress bar (Progressbar) - indeterminate value </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "https://jqueryui.com/resources/demos/style.css"> <Script> $ (Function () { $ ( "#progressbar") .progressbar ({ value: false }); $ ( "Button") .on ( "click", function (event) { var target = $ (event.target), progressbar = $ ( "#progressbar"), progressbarValue = progressbar.find ( ".ui-progressbar-value"); if (target.is ( "#numButton")) { progressbar.progressbar ( "option", { value: Math.floor (Math.random () * 100) }); } Else if (target.is ( "#colorButton")) { progressbarValue.css ({ "Background": '#' + Math.floor (Math.random () * 16777215) .toString (16) }); } Else if (target.is ( "#falseButton")) { progressbar.progressbar ( "option", "value", false); } }); }); </ Script> <Style> #progressbar .ui-progressbar-value { background-color: #ccc; } </ Style> </ Head> <Body> <Div id = "progressbar"> </ div> <Button id = "numButton"> random value - OK </ button> <Button id = "falseButton"> Sure </ button> <Button id = "colorButton"> random colors </ button> </ Body> </ Html>