Membuat Tombol Loading Dengan Bootstrap dan Font Awesome

Kembali lagi di blog sederhana ini teman-teman, pada postingan kali ini saya ingin membahas tentang cara membuat tombol atau button dengan menggunakan bootstrap dan font awesome dan tentunya juga jquery. Jadi sebelum mempraktekan ini, teman teman bisa download terlebih dahulu librarrynya pada sistus resminya atau jika tidak mau ribet download bisa menggunakan CDN dari masing-masing library. Kalau dalam contoh postingan kali ini sih saya menggunakan CDN sih,, males download soalnya,,hehehehhehe.

Baca Juga : Cara Membuat Tombol Hover Menarik

Oh ya, tombol loading ini tentunya sangat berguna untuk submit form pada aplikasi yang teman-teman kembangkan. Jadi aplikasi lebih interaktif dengan menampilkan animasi daripada hanya diam saja dan tidak ada respon ketika sudah klik tombol atau button. ok langsung saja berikut adalah source code yang saya gunakan :

berikut untuk kode html yang digunakan :

<button class="btn btn-success btn-md" data-loading-text="<i class='fa fa-spinner fa-spin'></i> Saving..." id="btn-simpan"> Simpan </button>
<button class="btn btn-warning btn-md" id="btn-reset"> Reset </button>

Kemudian untuk jquerynya seperti berikut :

$(document).ready(function(){
   $('#btn-simpan').click(function(){ 
    $(this).button('loading'); //untuk membuat botton jadi loading
   });

   $('#btn-reset').click(function(){
    $('#btn-simpan').button('reset'); //untuk reset kembali button menjadi seperti awal
   });

  });

Simpan file tersebut dengan format .html, kemudian jalankan di browser. Berikut demo hasil programnya :