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

[Tridip Bhattacharjee]

still got no answer........... :(

[Sander Elias]

Hi Tridip,

A simple ng-show will do. Here is an example. I put in a very simple spinner, but with adding some extra CSS, you can format it just as you need it, including the animations.

Regards

Sander

[Tridip Bhattacharjee]

thanks @Sander.

please tell me how to attach my style1 when show button click and same way how to attach style2 when hide button click. initially will have  style2 attached. looking for your suggestion.

if possible tell me how to make it in directive too.

thanks

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/f3bmhhcWa3U/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.