javascript - HTML ページのスピナーを作成する

Question

ユーザーがサーバーに送信する必要がある Web フォームがあります。サーバーの応答には数秒かかる場合があります。そのため、他のすべてのフィールドがグレー表示され、ユーザーが Web フォームに変更を加え、中央に回転し続けるスピナーがあるように、ユーザーにスピナーを表示したいと思います.どのように進めればよいか教えてください..

Answer 1

ajaxを使用してクエリを送信する私の完全なソリューションは次のとおりです（標準フォームの投稿を使用してページを離れると、スピナーを使用できません）：

loading = {
    count: 0
};

loading.finish = function() {
    this.count--;
    if (this.count==0) this.$div.hide();
};

// 
loading.start = function() {
    this.count++;
    if (!this.$div) {
        var html = '<div style="position: fixed;z-index:100;left:0;top:0;right:0;bottom:0;background: black;opacity: 0.6;">';
        html += '<table width=100% height=100%>';
        html += '<tr><td align=center valign=middle>';
        html += '<img src=img/loading.gif>';
        html += '</td></tr>';
        html += '</table></div>';
        this.$div=$(html);
        this.$div.prependTo('body');
    }
    setTimeout(function(){
        if (loading.count>0) loading.$div.show();
    }, 500);
};

// the function to call
askUrl = function(url, success) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                success(msg);
            }
            loading.finish();
        }
    };
    loading.start();
    httpRequest.open('GET', url);
    httpRequest.send();
};

askUrl を呼び出してサーバーが 500 ミリ秒以内に応答しない場合、画面は灰色になり、スピナーが表示されます。

ここでgifスピナーを手に入れました。