Mengubah kursor menjadi menunggu di javascript / jquery

Bagaimana saya mendapatkan kursor saya untuk mengubah ikon pemuatan ini ketika sebuah fungsi dipanggil dan bagaimana saya mengubahnya kembali ke kursor normal di javascript / jquery

Dalam penggunaan jQuery Anda:

$("body").css("cursor", "progress");

lalu kembali normal lagi

$("body").css("cursor", "default");

Seorang kolega menyarankan pendekatan yang menurut saya lebih disukai daripada solusi yang dipilih di sini. Pertama, di CSS, tambahkan aturan ini:

body.waiting * {
    cursor: progress;
}

Kemudian, untuk mengaktifkan kursor kemajuan, ucapkan:

$('body').addClass('waiting');

dan untuk mematikan kursor kemajuan, ucapkan:

$('body').removeClass('waiting');

Keuntungan dari pendekatan ini adalah ketika Anda mematikan kursor kemajuan, kursor lain apa pun yang telah ditentukan di CSS Anda akan dipulihkan. Jika aturan CSS tidak cukup kuat untuk mengesampingkan aturan CSS lainnya, Anda dapat menambahkan id ke badan dan ke aturan, atau gunakan !important.

Tolong jangan gunakan jQuery untuk ini di 2018! Tidak ada alasan untuk menyertakan seluruh pustaka eksternal hanya untuk melakukan satu tindakan ini yang dapat dicapai dengan satu baris:

Ubah kursor menjadi spinner: document.body.style.cursor = 'wait';

Kembalikan kursor ke normal: document.body.style.cursor = 'default';

Berikut ini adalah cara yang saya pilih, dan akan mengubah kursor setiap kali halaman akan berubah yaitu beforeunload

$(window).on('beforeunload', function(){
   $('*').css("cursor", "progress");
});

Menggunakan jquery dan css:

$("#element").click(function(){ 
    $(this).addClass("wait");
});​

HTML: <div id="element">Click and wait</div>​

CSS: .wait {cursor:wait}​

Demo di sini

Timpa semua elemen tunggal

$("*").css("cursor", "progress");

$('#some_id').click(function() {
  $("body").css("cursor", "progress");
  $.ajax({
    url: "test.html",
    context: document.body,
    success: function() {
      $("body").css("cursor", "default");
    }
  });
});

Ini akan membuat kursor pemuatan sampai panggilan ajax Anda berhasil.

jQuery:
$("body").css("cursor", "progress");

kembali lagi
$("body").css("cursor", "default");

Murni:
document.body.style.cursor = 'progress';

kembali lagi
document.body.style.cursor = 'default';

Anda tidak membutuhkan JavaScript untuk ini. Anda dapat mengubah kursor menjadi apa pun yang Anda inginkan menggunakan CSS:

selector {
    cursor: url(myimage.jpg), auto;
}

Lihat di sini untuk dukungan browser karena ada beberapa perbedaan kecil bergantung pada browser

Berikut hal menarik lainnya yang bisa Anda lakukan. Tentukan fungsi yang akan dipanggil sebelum setiap panggilan ajax. Juga tetapkan fungsi untuk dipanggil setelah setiap panggilan ajax selesai. Fungsi pertama akan mengatur kursor tunggu dan fungsi kedua akan menghapusnya. Mereka terlihat seperti berikut:

$(document).ajaxComplete(function(event, request, settings) {
    $('*').css('cursor', 'default');
  });

function waitCursor() {
    $('*').css('cursor', 'progress');
  }

Jika menyimpan terlalu cepat, coba ini:

<style media="screen" type="text/css">
    .autosave {display: inline; padding: 0 10px; color:green; font-weight: 400; font-style: italic;}
</style>

<input type="button" value="Save" onclick="save();" />&nbsp;
<span class="autosave" style="display: none;">Saved Successfully</span>


$('span.autosave').fadeIn("80");
$('span.autosave').delay("400");
$('span.autosave').fadeOut("80");

Menyetel kursor untuk 'body' akan mengubah kursor untuk latar belakang halaman tetapi tidak untuk kontrol di atasnya. Misalnya, tombol akan tetap memiliki kursor biasa saat diarahkan ke atasnya. Berikut ini yang saya gunakan:

Untuk menyetel kursor 'tunggu', buat elemen gaya dan masukkan di kepala:

var css = "* { cursor: wait; !important}";
var style = document.createElement("style");
style.type = "text/css";
style.id = "mywaitcursorstyle";
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);

Kemudian untuk memulihkan kursor, hapus elemen gaya:

var style = document.getElementById("mywaitcursorstyle");
if (style) {
  style.parentNode.removeChild(style);
}

Saya menemukan bahwa satu-satunya cara agar kursor menyetel ulang gayanya secara efektif kembali ke gaya sebelum diubah ke gaya tunggu adalah dengan menyetel gaya asli di lembar gaya atau di tag gaya di awal halaman, setel kelas objek yang dimaksud dengan nama gaya. Kemudian setelah masa tunggu, Anda menyetel gaya kursor kembali ke string kosong, BUKAN "default" dan kembali ke nilai aslinya seperti yang ditetapkan di tag gaya atau lembar gaya Anda. Menyetelnya ke "default" setelah masa tunggu hanya mengubah gaya kursor untuk setiap elemen ke gaya yang disebut "default" yang merupakan penunjuk. Itu tidak mengubahnya kembali ke nilai semula.

Ada dua syarat untuk membuat ini berhasil. Pertama Anda harus mengatur gaya di lembar gaya atau di header halaman dengan tag gaya, BUKAN sebagai gaya sebaris dan kedua adalah menyetel ulang gayanya dengan menyetel gaya tunggu kembali ke string kosong.