405294 (1) [Avatar] Offline
#1


long time back i developed a busy indicator by jquery and it works well. we can show when i want and also can hide too.

the same functionality i like to develop in angular without using jquery. please have a look my fiddle https://jsfiddle.net/tridip/xvqbrse7/ and run then can understand what i like to develop with angular. i am new in angular and that is why no idea is coming to my mind that how could i develop this what i developed with jquery.
jquery code for busy box

<input id = "btnShow" type="submit" value="Show"/>
<input id = "btnHide" type="submit" value="Hide"/>

$(document).ready(function() {
       var loadImgPath = "http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-1.gif";

    $("#btnShow").click(function(){
        $.busyToggle('BusyBox', loadImgPath, 0, 1, 500, 0, function () {
            //alert('div visible'); 
        });
        return false;
    }); 

    $("#btnHide").click(function(){
                $.busyToggle('BusyBox', loadImgPath, -90, 0, 500, 0, function () {
                    //alert('div hide') 
                });
        return false;
    }); 
});

    //this exists routine will check the element exist on page
    jQuery.fn.exists = function () { return this.length > 0; }

    //this exists busyToggle will show busy images at bottom center on page
    $.busyToggle = function (selector, ImgLoadSrc, marginBottom, opacity, speed, easing, callback) {

        var oDiv = $("<div id='" + selector + "'><img src='" + ImgLoadSrc + "'  alt='Loading...'/><div><em>Loading Wait...</em></div></div>");
        if ($("#BusyBox").exists() == false) {
            oDiv.css("background", "-moz-linear-gradient(center top , #F1F2F2 0%, #F1F2F2 100%) repeat scroll 0 0 transparent");
            oDiv.css("border-top-left-radius", "5px");
            oDiv.css("border-top-right-radius", "5px");
            oDiv.css("bottom", "0px");
            oDiv.css("font-size", "0.8em");
            oDiv.css("font-style", "normal");
            oDiv.css("font-weight", "normal");
            oDiv.css("left", "50%");
            oDiv.css("margin-left", "-45px");
            oDiv.css("padding-top", "20px");
            oDiv.css("position", "fixed");
            oDiv.css("text-align", "center");
            oDiv.css("width", "90px");
            oDiv.css("height", "50px");
            oDiv.css("background-repeat", "no-repeat");
            oDiv.css("background-position", "center center");
            oDiv.css("border", "1px solid #ccc");
            oDiv.css("margin-bottom", "-(90px");
            oDiv.data('IsUp', 1)
            oDiv.appendTo('body');
        }

        if (oDiv.data('IsUp') == 1) {
            oDiv.data('IsUp', 0);
            return $("#BusyBox").stop(true).animate({ marginBottom: marginBottom, opacity: opacity }, { queue: false, duration: speed, complete: callback });
        }
        else {
            oDiv.data('IsUp', 1);
            return $("#BusyBox").stop(true).animate({ marginBottom: marginBottom, opacity: opacity }, { queue: false, duration: speed, complete: callback });
        }
    };


if possible please see my above jquery code and guide me how to develop same output with angular. thanks