Awalnya saat bikin web theme pake bootstrap, terus pengen ada visual loading di tombol. Di bootstrap memang sudah ada, tapi yang jadi masalah adalah, di dokumentasi gak terlalu lengkap, akhirnya ya hasilnya tombol statis aja, gak ada efek loading seperti di gambar ini:

[caption id="attachment_2722" align="alignnone" width="116"]Load More Tombol Load More Dengan Efek Loading State.[/caption]

Jadi, setelah cari cara dengan fitur "Inspect Element" yang ada di chrome, ternyata di dokumentasi itu tidak menyertakan user harus masukin ID di HTML untuk ditambahi script loading state. Nah lho, si fat lupa kali ya, atau memang sengaja begitu? Wallahu'alam. Nah sekarang, gimana sih caranya biar tombolnya ada tulisan "loading..." seperti itu?

Awalnya, di dokumentasi udah ditulis begini:

Cuma hasilnya ya begini:

[caption id="attachment_2723" align="alignnone" width="116"]Tombol Loading Gagal. Tombol Loading Gagal.[/caption]

Terus gimana lagi? Tambah aja attribute ID buat tag button, misal kita tambah id="btn-loading" dan hasilnya begini:

Udah beres? Nah kita sisipkan script baru dibawah tag button tadi, ini scriptnya:

// button state
$('#btn-loading')
  .click(function () {
    var btn = $(this)
    btn.button('loading')
      setTimeout(function () {
        btn.button('reset')
  }, 3000)
})

Tanda pagar itu artinya kita melakukan getElementById di HTML via JS, jadi kita ngambil element HTML yang punya ID btn-loading. Terus kalau terlalu lama atau kurang lama, ganti aja angka 3000 itu, angka itu satuan milisecond, jadi kalau mau 5 detik, isi 5000 atau kalau mau 2 detik, isi 2000.

Sebenernya script diatas itu ada di file application.js dari paket bootstrap javascript plugin.

Kalau pengen liat contoh, kesini aja http://jsfiddle.net/sendz/WL5RN/