--- /dev/null
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+ <title>jQuery UI Progressbar - Animated</title>\r
+ <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../../jquery-1.3.1.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.progressbar.js"></script>\r
+ <link type="text/css" href="../demos.css" rel="stylesheet" />\r
+ <style type="text/css">\r
+ .ui-progressbar-value { background-image: url(images/pbar-ani.gif);\r
+ </style>\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ $("#progressbar").progressbar({\r
+ value: 59\r
+ });\r
+ });\r
+ </script>\r
+</head>\r
+<body>\r
+\r
+<div class="demo">\r
+\r
+<div id="progressbar"></div>\r
+\r
+</div><!-- End demo -->\r
+\r
+<div class="demo-description">\r
+\r
+<p>\r
+This progressbar has an animated fill by setting the\r
+<code>background-image</code>\r
+on the\r
+<code>.ui-progressbar-value</code>\r
+element, using css.\r
+</p>\r
+\r
+</div><!-- End demo-description -->\r
+\r
+</body>\r
+</html>\r
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
+ <li><a href="animated.html">Animated</a></li>
<li><a href="resize.html">Resizable progressbar</a></li>
</ul>
</div>
projects / jquery-ui.git / commitdiff
