mscalora/gist:d228a7e2e0b4b619bec6

## gistfile1.txt
<!DOCTYPE html>
<html>
    <head>
        <title>Busy Dialog Test</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
        <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
        <style>
            #test-main {
                text-align: center;
            }
            #group {
                display: inline-block;

            }
            .test-case {
                margin: 20px auto;
                text-align: left;
            }
            .test-case button {
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <section id="test-main">
            <h1>Busy Dialog Test</h1>
            <div id="group">
            </div>
            <div><b>Note:</b> Tests will dismiss after 10 seconds</div>
        </section>
        <script>
            var tests = {
                test1: {
                    description: 'All defaults'
                },
                test2: {
                    description: 'Type of "gear"',
                    type: 'gear'
                },
                test3: {
                    description: 'Cancelable',
                    cancelable: true
                },
                test4: {
                    description: 'Cancelable with label',
                    cancelable: true,
                    cancelButtonLabel: 'I give up!'
                },
                test5: {
                    description: 'Custom icon and size',
                    type: 'fa-android',
                    size: '8em'
                }
            };
            for( var i = 1; 'test'+i in tests; i++) {
                $('<div class="test-case">').append($('<button/>').attr('id','test'+i).text('Test '+i).wrap('<div/>'))
                    .append($('<span>').text(tests['test'+i].description))
                    .appendTo('#group');
            }
            $('#group button').on('click',function(){
                var test = $(this).attr('id');
                var dialog = showBusy(tests[test]);
                setTimeout(function(){
                    hideBusy(dialog);
                },10000)
            });

        </script>
    </body>
    <script>
        /**
         *
         * @param typeOrOptions - string 'refresh', 'gear', 'spin', 'notch' or any FontAwesome icon class like 'fa-android'
         *          or a options object with the following settings:
         *              type - string 'refresh', 'gear', 'spin', 'notch' or any FontAwesome icon class like 'fa-android'
         *              cancelable - boolean [false]
         *              cancelButtonLabel - string ['Cancel']
         *              cancelCallback - function [ function(evt){} ]
         *              size - icon width in CSS measurement units like '64px' [ '4em' ]
         *              classes - space delimited of one or more classes applied to dialog element [ '' ]
         *              dialogOptions - extra jQuery dialog options as a js object [ {} ]
         */
        function showBusy(typeOrOptions) {
            var opts = $.extend({
                type: typeof typeOrOptions === "string" ? typeOrOptions : "refresh",
                cancelable: false,
                cancelButtonLabel: "Cancel",
                cancelCallback: function(){},
                size: '4em',
                classes: "",
                dialogOptions: {}
            },typeof typeOrOptions === "object" ? typeOrOptions : {});
            $('#busy-dialog-ui').remove();
            var dialog = $('<div id="busy-dialog-ui"><div><i class="fa fa-spin"/></div><button></button></div>');
            dialog.append('<style>.busy-dialog-ui .ui-dialog-titlebar{ display:none; } .busy-dialog-ui { text-align: center; border-radius: 30px; border: 3px solid #444; } .busy-dialog-ui button { margin-top: 40px; } </style>');
            if (opts.cancelable) {
                $('button',dialog).text(opts.cancelButtonLabel).addClass(opts.cancelButtonClasses).on('click',function(evt){
                    dialog.dialog('close');
                    opts.cancelCallback.apply(opts,[evt]);
                });
            } else {
                $('button',dialog).remove();
            }
            var typeMap = {
                refresh: 'fa-refresh',
                gear: 'fa-cog',
                spin: 'fa-spinner',
                notch: 'fa-circle-o-notch'
            };
            $('i',dialog).addClass(opts.type in typeMap ? typeMap[opts.type] : opts.type).css('font-size',opts.size);
            dialog.css({
                padding: 40
            }).dialog($.extend({
                    modal: true,
                    width: 'auto',
                    closeOnEscape: false
                },opts.dialogOptions,{
                    dialogClass: 'busy-dialog-ui ' + ('dialogClass' in opts.dialogOptions ? opts.dialogOptions : '')
                }));
            $(window).on('resize orientationchange',function() {
                $("#busy-dialog-ui").dialog("option", "position", "center");
            });
            $('button',dialog).blur();
            return dialog;
        }

        /**
         * hide (take down) busy dialog
         * @param dialog [optional] take down this specific instance of the busy dialog, if it is not showing, don't do anything
         */
        function hideBusy(dialog) {
            // prevent stale dialog closure
            if (dialog && $(dialog).is(':not(:visible)')) {
                return;
            }
            $(dialog || '#busy-dialog-ui').dialog('close');
        }

    </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Busy Dialog Test</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
	<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
	<style>
	#test-main {
	text-align: center;
	}
	#group {
	display: inline-block;

	}
	.test-case {
	margin: 20px auto;
	text-align: left;
	}
	.test-case button {
	margin-right: 10px;
	}
	</style>
	</head>
	<body>
	<section id="test-main">
	<h1>Busy Dialog Test</h1>
	<div id="group">
	</div>
	<div><b>Note:</b> Tests will dismiss after 10 seconds</div>
	</section>
	<script>
	var tests = {
	test1: {
	description: 'All defaults'
	},
	test2: {
	description: 'Type of "gear"',
	type: 'gear'
	},
	test3: {
	description: 'Cancelable',
	cancelable: true
	},
	test4: {
	description: 'Cancelable with label',
	cancelable: true,
	cancelButtonLabel: 'I give up!'
	},
	test5: {
	description: 'Custom icon and size',
	type: 'fa-android',
	size: '8em'
	}
	};
	for( var i = 1; 'test'+i in tests; i++) {
	$('<div class="test-case">').append($('<button/>').attr('id','test'+i).text('Test '+i).wrap('<div/>'))
	.append($('<span>').text(tests['test'+i].description))
	.appendTo('#group');
	}
	$('#group button').on('click',function(){
	var test = $(this).attr('id');
	var dialog = showBusy(tests[test]);
	setTimeout(function(){
	hideBusy(dialog);
	},10000)
	});

	</script>
	</body>
	<script>
	/**
	*
	* @param typeOrOptions - string 'refresh', 'gear', 'spin', 'notch' or any FontAwesome icon class like 'fa-android'
	* or a options object with the following settings:
	* type - string 'refresh', 'gear', 'spin', 'notch' or any FontAwesome icon class like 'fa-android'
	* cancelable - boolean [false]
	* cancelButtonLabel - string ['Cancel']
	* cancelCallback - function [ function(evt){} ]
	* size - icon width in CSS measurement units like '64px' [ '4em' ]
	* classes - space delimited of one or more classes applied to dialog element [ '' ]
	* dialogOptions - extra jQuery dialog options as a js object [ {} ]
	*/
	function showBusy(typeOrOptions) {
	var opts = $.extend({
	type: typeof typeOrOptions === "string" ? typeOrOptions : "refresh",
	cancelable: false,
	cancelButtonLabel: "Cancel",
	cancelCallback: function(){},
	size: '4em',
	classes: "",
	dialogOptions: {}
	},typeof typeOrOptions === "object" ? typeOrOptions : {});
	$('#busy-dialog-ui').remove();
	var dialog = $('<div id="busy-dialog-ui"><div><i class="fa fa-spin"/></div><button></button></div>');
	dialog.append('<style>.busy-dialog-ui .ui-dialog-titlebar{ display:none; } .busy-dialog-ui { text-align: center; border-radius: 30px; border: 3px solid #444; } .busy-dialog-ui button { margin-top: 40px; } </style>');
	if (opts.cancelable) {
	$('button',dialog).text(opts.cancelButtonLabel).addClass(opts.cancelButtonClasses).on('click',function(evt){
	dialog.dialog('close');
	opts.cancelCallback.apply(opts,[evt]);
	});
	} else {
	$('button',dialog).remove();
	}
	var typeMap = {
	refresh: 'fa-refresh',
	gear: 'fa-cog',
	spin: 'fa-spinner',
	notch: 'fa-circle-o-notch'
	};
	$('i',dialog).addClass(opts.type in typeMap ? typeMap[opts.type] : opts.type).css('font-size',opts.size);
	dialog.css({
	padding: 40
	}).dialog($.extend({
	modal: true,
	width: 'auto',
	closeOnEscape: false
	},opts.dialogOptions,{
	dialogClass: 'busy-dialog-ui ' + ('dialogClass' in opts.dialogOptions ? opts.dialogOptions : '')
	}));
	$(window).on('resize orientationchange',function() {
	$("#busy-dialog-ui").dialog("option", "position", "center");
	});
	$('button',dialog).blur();
	return dialog;
	}

	/**
	* hide (take down) busy dialog
	* @param dialog [optional] take down this specific instance of the busy dialog, if it is not showing, don't do anything
	*/
	function hideBusy(dialog) {
	// prevent stale dialog closure
	if (dialog && $(dialog).is(':not(:visible)')) {
	return;
	}
	$(dialog \|\| '#busy-dialog-ui').dialog('close');
	}

	</script>
	</html>