Angular: Empty Fiddle

http://angularjs.org/

by Danish Farman

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
    <div ng-controller="AppCtrl">
        <button ng-click="test()">SetBusy...</button>

    </div>

CSS

.appBusy {
    background: #FFF1A8 -webkit-gradient(linear,left top,left bottom,from(#FFE090),to(#FFF2B0));
    background-color: #FFF1A8;
    color: black;
    left: 50%;
    padding: 3px 6px;
    position: fixed;
    top: 0;
    z-index: 10000;
    border-radius: 0 0 5px 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    box-shadow: rgba(0,0,0,0.246094) 0px -3px 5px,rgba(0,0,0,0.246094) 0px 3px 5px;
    -moz-box-shadow: rgba(0,0,0,0.246094) 0px -3px 5px,rgba(0,0,0,0.246094) 0px 3px 5px;
    -webkit-box-shadow: rgba(0,0,0,0.246094) 0px -3px 5px,rgba(0,0,0,0.246094) 0px 3px 5px;
}

JavaScript

angular.module('myApp', ['kalitte.services'])
.config(function (appBusyProvider) {
    appBusyProvider.setMsg('Loading ...');
    appBusyProvider.setTimeout(50);
    appBusyProvider.setClazz('appBusy');
});

function AppCtrl($scope, appBusy) {


            $scope.test = function () {
                appBusy.set();

                setTimeout(function () {
                    // set a custom message
                    appBusy.set("Still loading ...");
                }, 2000);

                setTimeout(function () {
                    // done.
                    appBusy.set(false);
                    alert("done");
                }, 5000);
            }
}



        var appServices = angular.module('kalitte.services', []).provider("appBusy", function () {

            // initialize
            this.msg = "Loading ...";
            this.timeout = 1000;
            this.clazz = "appBusy";

            var body = angular.element(window.document.body);
            var domEl = null;

            this.show = function (msg) {
                msg = msg || this.msg;

                // if not already busy
                if (!domEl) {
                    domEl = angular.element('<div></div>').addClass(this.clazz);
                    domEl.text(msg);
                    setTimeout(function () {

                        // if still busy add it to body.
                        if (domEl)
                            body.append(domEl);
                    }, this.timeout);
                } else {

                    // update busy message
                    domEl.text(msg);
                }
            }

            this.hide = function () {
                if (domEl) {
                    domEl.remove();
                    domEl = null;
                }
            }

            this.$get = function () {
                var self = this;
                return {
                    set: function (msg) {
                        if (typeof msg == 'boolean') {
  ...