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	torben	2125	<!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>