diff --git a/demos/functional/images/clock.png b/demos/functional/images/clock.png
new file mode 100644
index 000000000..dbb57fa9a
Binary files /dev/null and b/demos/functional/images/clock.png differ
diff --git a/demos/functional/templates/ui.magnifier.html b/demos/functional/templates/ui.magnifier.html
new file mode 100644
index 000000000..fd701ae3b
--- /dev/null
+++ b/demos/functional/templates/ui.magnifier.html
@@ -0,0 +1,52 @@
+<script type="text/javascript">
+
+	var model = {
+		
+		renderAt: '#containerDemo',
+
+		title: 'Magnifier Demos',
+		
+		demos: [
+
+			{
+				title: 'Simple Magnifier',
+				desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
+				html: '<div id="magnifier"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div>',
+				destroy: '$("#magnifier").magnifier("destroy");',
+				options: [
+					{ desc: 'Attach a magnifier', source: '$("#magnifier").magnifier();' },
+					{ desc: 'Small magnification', source: '$("#magnifier").magnifier({magnification:1.5});' },
+					{ desc: 'Disable the magnifier', source: '$("#magnifier").magnifier("disable");' }
+				]
+			},
+
+			{
+				title: 'Opacity Magnifier',
+				desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
+				html: '<div id="magnifier2"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div>',
+				destroy: '$("#magnifier2").magnifier("destroy");',
+				options: [
+					{ desc: 'Opacity option', source: '$("#magnifier2").magnifier({opacity:{min:0.4,max:1.0}});' }
+				]
+			},
+
+			{
+				title: 'Overlap Magnifier',
+				desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
+				html: '<div style="height:16px;">&nbsp;</div><div id="magnifier3"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div><div style="height:84px;">&nbsp;</div>',
+				destroy: '$("#magnifier3").magnifier("destroy");',
+				options: [
+					{ desc: 'Overlap option', source: '$("#magnifier3").magnifier({overlap:true});' }
+				]
+			}
+
+		]
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
+</script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.progressbar.html b/demos/functional/templates/ui.progressbar.html
new file mode 100644
index 000000000..af0669f95
--- /dev/null
+++ b/demos/functional/templates/ui.progressbar.html
@@ -0,0 +1,35 @@
+<script type="text/javascript">
+
+	var model = {
+		
+		renderAt: '#containerDemo',
+
+		title: 'Progressbar Demos',
+		
+		demos: [
+
+			{
+				title: 'Simple Progressbar',
+				desc: 'With few lines of code you could build a progressbar. You can try more options on the fly!',
+				html: '<div id="progressbar"></div>',
+				destroy: '$("#progressbar").progressbar("destroy");',
+				options: [
+					{ desc: 'Attach a progressbar', source: '$("#progressbar").progressbar();' },
+					{ desc: 'Start the progressbar', source: '$("#progressbar").progressbar("start");' },
+					{ desc: 'Loop', source: '$("#progressbar").progressbar({duration:2000,wait:"loop"}).progressbar("start");' },
+					{ desc: 'Callback when finish', source: '$("#progressbar").progressbar({stop:function(){alert("Finished");}}).progressbar("start");' },
+					{ desc: 'Enable the progressbar', source: '$("#progressbar").progressbar("enable");' },
+					{ desc: 'Disable the progressbar', source: '$("#progressbar").progressbar("disable");' }
+				]
+			}
+
+		]
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
+</script>
\ No newline at end of file