corrade-http-templates – Rev 62

Subversion Repositories:
Rev:
<!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>