Simple Global/Application Wide Alert Service for Angular JS (animation is dependent with: http://daneden.github.io/animate.css/ library)

gistfile1.txt

/*
 |--------------------------------------------------------------------------
 | GlobalLoaderService
 |--------------------------------------------------------------------------
 |
 | Global Loader Factory, use for fancy effect when saving, loading, deleting
 |
 */
var GlobalLoaderService = function () {};

/**
 * the HTML that will be created and appended to the document as the effect
 *
 * @param loaderText
 * @param loaderMode
 * @returns {string}
 */
GlobalLoaderService.prototype.effect = function (loaderText, loaderMode) {

    return '<div id="globalEffect" class="alert alert-'+loaderMode+' text-center animated fadeInDown" style="font-size: 15px; padding: 10px; width: 260px; height: 65px; position: fixed; z-index: 99; bottom: 0; left: 0; margin-left: 10px; margin-bottom: 10px;">' +
        '' + loaderText + '</div>';

};

/**
 * triggers to show the effect
 *
 * @param message
 * @param mode
 * @returns {*|void}
 */
GlobalLoaderService.prototype.show = function (message,mode) {

    this.remove(); // make sure to remove the previous effect

    var loaderText = message || 'Loading..';
    var loaderMode = mode || 'success';

    angular.element(document.getElementsByTagName('body')).append(this.effect(loaderText, loaderMode));
    return this;

};

/**
 * triggers to hide the effect slowly
 *
 * @returns {*}
 */
GlobalLoaderService.prototype.hide = function () {

    angular.element("#globalEffect").removeClass('animated fadeInDown').fadeOut(3000,function(){ this.remove(); });
    return this;

};

/**
 * removes the appended fancy effect immediately
 *
 * @returns {*}
 */
GlobalLoaderService.prototype.remove = function () {

    angular.element("#globalEffect").remove();
    return this;

};

app.service('GlobalLoaderService',GlobalLoaderService);