در این مقاله نحوه ساخت Loading با استفاده از یک تصویر Gif که برای نمایش روند پیشرفت استفاده می شود را بررسی خواهیم کرد.

دستورات Html

ساختار html زیر دارای یک دکمه html و یک span و یک div مخفی (hidden) برای نمایش تصویر loading می باشد.

<input type="button" id="btnGet" value="IP Address گرفتن" />
<br />
<br />
<span id="lblIPAddress"></span>
<div class="modal" style="display: none">
    <div class="center">
        <img alt="" src="loader.gif" />
    </div>
</div>

اسکریپت زیر برای نمایش تصویر Loading می باشد. یک Div در BeforeSend وجود دارد که آشکار است اما در Complete نیز hidden می شود.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#btnGet").click(function () {
        $.ajaxSetup({
            global: false,
            type: "GET",
            url: "http://www.telize.com/jsonip",
            beforeSend: function () {
               $(".modal").show();
            },
            complete: function () {
                $(".modal").hide();
            }
        });
        $.ajax({
            data: "{}",
            success: function (r) {
                $("#lblIPAddress").html("IP Address: " + r.ip);
            }
        });
    });
});
</script>

CSS

<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    .modal
    {
        position: fixed;
        z-index: 999;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.8;
    }
    .center
    {
        z-index: 1000;
        margin: 300px auto;
        padding: 10px;
        width: 130px;
        background-color: White;
        border-radius: 10px;
        filter: alpha(opacity=100);
        opacity: 1;
        -moz-opacity: 1;
    }
    .center img
    {
        height: 128px;
        width: 128px;
    }
</style>