demos/progressbar/label.html

<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>jQuery UI Progressbar - Custom Label</title>
        <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
        <script src="../../jquery-1.9.1.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">
        <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...</div></div>

<div class="demo-description">
<p>Custom updated label demo.</p>
</div>
</body>
</html>
1	<!doctype html>
2	<html lang="en">
3	<head>
4	<meta charset="utf-8">
5	<title>jQuery UI Progressbar - Custom Label</title>
6	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7	<script src="../../jquery-1.9.1.js"></script>
8	<script src="../../ui/jquery.ui.core.js"></script>
9	<script src="../../ui/jquery.ui.widget.js"></script>
10	<script src="../../ui/jquery.ui.progressbar.js"></script>
11	<link rel="stylesheet" href="../demos.css">
12	<style>
13	.ui-progressbar {
14	position: relative;
15	}
16	.progress-label {
17	position: absolute;
18	left: 50%;
19	top: 4px;
20	font-weight: bold;
21	text-shadow: 1px 1px 0 #fff;
22	}
23	</style>
24	<script>
25	$(function() {
26	var progressbar = $( "#progressbar" ),
27	progressLabel = $( ".progress-label" );
28
29	progressbar.progressbar({
30	value: false,
31	change: function() {
32	progressLabel.text( progressbar.progressbar( "value" ) + "%" );
33	},
34	complete: function() {
35	progressLabel.text( "Complete!" );
36	}
37	});
38
39	function progress() {
40	var val = progressbar.progressbar( "value" ) \|\| 0;
41
42	progressbar.progressbar( "value", val + 1 );
43
44	if ( val < 99 ) {
45	setTimeout( progress, 100 );
46	}
47	}
48
49	setTimeout( progress, 3000 );
50	});
51	</script>
52	</head>
53	<body>
54
55	<div id="progressbar"><div class="progress-label">Loading...</div></div>
56
57	<div class="demo-description">
58	<p>Custom updated label demo.</p>
59	</div>
60	</body>
61	</html>