Ketika kita berbicara tentang pengalaman pengguna (user experience) yang baik dalam pengembangan aplikasi web, salah satu hal yang penting adalah memberikan umpan balik visual yang jelas kepada pengguna saat mereka berinteraksi dengan elemen-elemen interaktif seperti tombol submit. Animasi loading button submit adalah salah satu cara yang efektif untuk memberikan umpan balik kepada pengguna bahwa proses sedang berlangsung dan mereka harus menunggu sejenak. Dalam artikel ini, saya akan membahas cara membuat dan menerapkan animasi loading pada tombol submit dengan menggunakan HTML, CSS, dan JavaScript.
Daftar Isi
Membuat Animasi Loading
Pertama-tama, saya akan membuat animasi loading terlebih dahulu tanpa menggunakan button, saya akan membuatnya hanya menggunakan CSS. Dengan menggunakan animasi CSS, kita dapat menciptakan efek visual yang menarik dan responsif tanpa perlu menambahkan banyak kode JavaScript.
Berikut adalah potongan kode CSS yang akan membuat animasi loading:
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader_button {
border: 2px solid #EF5431;
border-radius: 50%;
border-top: 2px solid #F7AA98;
width: 18px;
height: 18px;
margin-right: 5px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
Menggabungkan Animasi Kedalam Button
Jika animasi loading sudah jadi, saya akan menggabungkannya ke dalam button yang akan saya buat. Tambahkan beberapa class CSS agar tampilan button kita menjadi lebih bagus. Berikut HTML untuk submit buttonnya:
<div class="button-submit loading">
<div class="flex">
<div class="loader_button mr-2"></div>
Submit
</div>
</div>
Setelah itu saya akan memberikan style pada class-class yang sudah saya buat seperti class button-submit, loading, flex dan mr-2.
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader_button {
border: 2px solid #EF5431;
border-radius: 50%;
border-top: 2px solid #F7AA98;
width: 18px;
height: 18px;
margin-right: 5px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
.button-submit {
background: #EF5431;
border-radius: 4px;
padding: 10px 16px;
color: #FFFFFF;
font-weight: 600;
font-size: 14px;
line-height: 20px;
text-align: center;
width: fit-content;
cursor: pointer;
}
.button-submit:hover {
opacity: 0.8;
}
.button-submit.loading:hover {
opacity: 1;
}
.button-submit.loading {
background: #F7AA98;
color: #FFFFFF;
cursor: auto;
}
.flex{
display: flex;
align-items: center;
}
.mr-2{
margin-right:10px;
}
Dan hasil akhirnya akan seperti ini. Tampilan animasi button seperti ini sudah cukup membuat pengalaman pengguna menjadi lebih baik saat menggunakan website kamu. Karena dengan memberikan animasi dan mendisable button mengurangi spam klik yang dilakukan oleh user.
Membuat Fungsi LoadingButtonSubmit
Sekarang bagaimana cara mengaplikasikan animasi loading tersebut di website? Misalkan kamu memiliki form pendaftaran dan user mengisi form tersebut, setelah itu user meng-klik button disinilah kita harus memunculkan animasi loading agar user menunggu proses pendaftaran hingga selesai.
Caranya adalah dengan menambahkan javascript untuk membuat proses itu terjadi. Agar animasi loading tersebut dapat dipakai berkali-kali saya akan membuatnya dalam bentuk function, seperti di bawah ini:
function loadingButtonSubmit(classname,type){
if(type=="loading"){
$(`.${classname}`).addClass('loading');
var text = $(`.${classname}`).text();
$(`.${classname}`).html(`<div class="flex"><div class="loader_button mr-2"></div>${text}</div>`);
}else{
$(`.${classname}`).removeClass('loading');
var text = $(`.${classname}`).text();
$(`.${classname}`).html(`${text}`);
}
}
Jangan lupa untuk menambahkan library jquery agar mempercepat kamu dalam pemanggilan id element dan sintaks-sintaks yang lain. Disini saya akan menjelaskan terlebih dahulu fungsi yang sudah saya buat. Fungsi tersebut menerima 2 parameter yaitu classname dan type. Classname adalah nama class yang di buat untuk button yaitu button-submit dan type ada 2 value yaitu loading dan remove.
Jika saat pemanggilan fungsi tersebut kamu mengirim type loading, maka div pada classname button-submit akan ditambahkan class baru yaitu loading. Setelah itu content yang ada di button-submit akan kita timpa dengan animasi yang sudah kita buat sebelumnya. Dan sebaliknya jika parameter yang dikirim adalah remove, maka akan menghapus class loading pada button-submit.
Pemanggilan Fungsi LoadingButtonSubmit
Dan bagaimana cara penggunaannya. Saya akan membuat 1 fungsi lagi yaitu fungsi untuk men-trigger button submit sekaligus memanggil API ketika diklik.
function clickSubmit(){
var checking = $(".button-submit").hasClass("loading");
if(!checking){
loadingButtonSubmit("button-submit","loading");
setTimeout(function() {
//Fungsi API
loadingButtonSubmit("button-submit","remove");
}, 3000);
}
}
Di fungsi ini, ketika clickSubmit di panggil, saya akan mengecek terlebih dahulu kondisi button-submit apakah sedang memproses loading atau tidak dengan mengecek dari class loading pada button-submit. Jika tidak ada maka saya akan memanggil fungsi tersebut dan mengirim parameter classname dan type yaitu loading. Ini akan merubah tampilan button submit kamu menjadi loading. Ketika proses pemanggilan API telah selesai saya akan memanggil kembali fungsi tersebut untuk menghapus animasi loading pada button submit.
Dan untuk bagian HTMLnya tidak perlu menambahkan class loading seperti di awal, cukup class button-submit saja menjadi seperti ini:
<div onclick="clickSubmit()" class="button-submit">Submit</div>
Berikut adalah implementasi lengkap dari tombol submit dengan animasi loading menggunakan HTML, CSS, dan JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Button Submit</title>
</head>
<style>
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader_button {
border: 2px solid #EF5431;
border-radius: 50%;
border-top: 2px solid #F7AA98;
width: 18px;
height: 18px;
margin-right: 5px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
.button-submit {
background: #EF5431;
border-radius: 4px;
padding: 10px 16px;
color: #FFFFFF;
font-weight: 600;
font-size: 14px;
line-height: 20px;
text-align: center;
width: fit-content;
cursor: pointer;
}
.button-submit:hover {
opacity: 0.8;
}
.button-submit.loading:hover {
opacity: 1;
}
.button-submit.loading {
background: #F7AA98;
color: #FFFFFF;
cursor: auto;
}
.flex{
display: flex;
align-items: center;
}
</style>
<body>
<div onclick="clickSubmit()" class="button-submit">Submit</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script>
function clickSubmit(){
var checking = $(".button-submit").hasClass("loading");
if(!checking){
loadingButtonSubmit("button-submit","loading");
setTimeout(function() {
//Fungsi API
loadingButtonSubmit("button-submit","remove");
}, 3000);
}
}
function loadingButtonSubmit(classname,type){
if(type=="loading"){
$(`.${classname}`).addClass('loading');
var text = $(`.${classname}`).text();
$(`.${classname}`).html(`<div class="flex"><div class="loader_button mr-2"></div>${text}</div>`);
}else{
$(`.${classname}`).removeClass('loading');
var text = $(`.${classname}`).text();
$(`.${classname}`).html(`${text}`);
}
}
</script>
</body>
</html>
Baca juga: Javascript format input NPWP
Penutup
Dengan menerapkan animasi loading pada tombol submit, kita dapat meningkatkan responsivitas dan pengalaman pengguna dalam menggunakan aplikasi web. Dengan memanfaatkan kombinasi HTML, CSS, dan JavaScript, kita dapat membuat animasi loading yang menarik dan efektif tanpa perlu banyak kode. Semoga artikel ini bermanfaat bagi kamu dalam pengembangan aplikasi web! Selamat mencoba!