Tutorial Pemrograman

Cara Membuat Button Loading dengan Bootstrap

Bootstrap adalah suatu pustaka CSS Framework yang didesain untuk mempercantik tampilan dalam produktifitas website. Bootstrap ini memiliki kumpulan kode script yang telah siap dipakai untuk merancang tampilan website sehingga si web programmer tidak perlu membuat kode perintah CSS dari nol. Bootstrap merupakan salah satu CSS Framework yang populer bagi web programmer frontend pada saat ini.

Ternyata, Bootstrap ini ada juga pustaka JS Framework. Nah, Bootstrap JS Framework ini bisa dijadikan sebagai alternatif dari JQuery dalam membuat tampilan antar-muka pada website tersebut.

Dengan adanya Bootstrap ini, maka si web programmer diharapkan mudah dalam membuat atau merancang tampilan website sesuai kebutuhan.

Sekarang, penulis akan berikan tutorial cara membuat button loading dengan Bootstrap, yang dimana si pengguna selesai mengisi form pendaftaran anggota baru, maka dia mengklik tombol atau button tersebut yang terjadi muncul tanda proses atau loading di dalam button tersebut.

Berikut cara membuat button loading dengan Bootstrap.

Langkah:

1. Silahkan aktifkan teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “button-loading.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse → Open With → Web Browser app (Chrome, Mozilla, atau Microsoft Edge).

Lihat hasilnya pada tampilan awal.

Tampilan halaman setelah di klik.

Selesai.

Catatan: Pada kode script di bawah ini.

Kamu bisa ganti nilai interval “4000” dengan nilai angka sesuai keinginan kamu. Kode script ini berfungsi untuk menghentikan waktu proses pada simbol button loading. Nilai interval 1000 itu sama dengan 1 detik.

Kamu juga bisa memilih simbol button loading sendiri, ada 3 pilihan yakni:

  • fa fa-circle-o-notch fa-spin
  • fa fa-spinner fa-spin
  • fa fa-refresh fa-spin

Setelah dipilih, kamu bisa ganti kode script di bawah ini.

“<button type=”button” class=”btn btn-primary btn-lg” id=”load” data-loading-text=”<i class=’nama_simbol_button_loading‘></i> Processing Order”>Submit Order with Spinner</button>”

Demikian tutorial cara membuat button loading dengan Bootstrap. Selamat Mencoba.









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top