JSFiddle - React, Tailwind, and code Playground

by tridip

HTML

<a href="#" id='lnk' class="lnkcss">FeedBack</a>

CSS

.lnkcss 
    {
        margin-left:50px;
    }

 .BusyStyles
        {
            background-image: url('http://www.bba-reman.com/images/ajax-loader.gif');
            background-repeat: no-repeat; background-position: center center; 
        }
        
#transition {
    
    display:none;
    position:absolute; top:50%; left:50%; z-index:50;
    border:1px solid #666;
    width:100px; height:100px;
    filter:alpha(opacity=0.2);
    -moz-opacity:0.2;
    -khtml-opacity: 0.2;
    opacity: 0.2;
    
}

JavaScript

$(document).ready(function () {
            $('#lnk').click(function (e) {
                $('body').append('<div id="transition"></div>').show();

                var $t = $('#transition'),
                to = $(this).offset(),
                td = $(document);

                $t.css({
                    top: to.top + 50,
                    left: to.left + 50,
                    display: 'block'
                }).animate({
                    opacity: 1,
                    top: td.height() / 2,
                    left: td.width() / 2
                }, 600, function () {
                    $(this).animate({
                        top: '-=75',
                        left: '-=50'
                    }, 600);

                    $('#transition').addClass("BusyStyles");
                    setTimeout(function () {
                        $('#transition').animate({
                            top: (td.height() / 2) - 200/2,
                            left: (td.width() / 2) - 250/2,
                            width: 250,
                            height: 200
                        }, 600, function () {
                            //alert('pp');
                            // to do things   
                            $('#transition').removeClass("BusyStyles");
                            $('#transition').html('<b>Welcome...</b>');
                        });
                    }, 3000);
                });

                $t.click(function (e) {
                    //alert('pp');
                    $(this).fadeOut('slow').remove();
                });
                return false;
            });


        });