[AngularJS] AngularJS: How to show & hide busy indicator with bit of animation

[Tridip Bhattacharjee]

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.


*my code*


<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

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.