Halo teman-teman apa kabar, selamat datang di blog saya, hari ini kita akan membuat Tombol atau button dengan progress bar menggunakan HTML CSS, dan JavaScript.
Progress bar adalah animasi yang muncul saat jendela, situs web, dan halaman digital lainnya ketika terbuka. Animasi progress bar ini bisa tampil berbeda-beda, bisa dalam bentuk seperti angka, bentuk horizontal-vertikal, dan bentuk melingkar.
Saya telah menggabungkan animasi progress bar ini di dalam tombol seperti yang telah saya berikan di halaman demo. Sebenarnya dalam program ini, pada tombol pertama, hanya ada satu tombol dan saat kita mengkliknya progress bar dimulai dan membutuhkan waktu untuk menyelesaikannya. Ketika progress bar berjalan, kita akan melihat tulisan pada tombol yang akan berubah.
Demo
Oke teman-teman mari kita lihat contoh animasi tombol atau button dengan progress bar yang telah saya buat pada halaman demo dibawah ini, kamu bisa mengklik tombolnya untuk melihat animasi progress bar berjalan.
Saya telah menyediakan semua kode dari program ini, Sebelum menuju ke file kode sumbernya, anda harus mengetahui beberapa poin penting dari program ini.
Seperti yang sudah anda lihat di halaman demo, pada awalnya kita melihat satu tombol dengan tulisan "Upload File" ketika kita mengklik tombol, progress bar mulai muncul dari sisi kiri dan berjalan ke sisi kanan, dan tulisan tombol berubah menjadi "Uploading.." dan ketika progress bar selesai, tulisan tombol berubah menjadi "Uploaded".
Untuk membuat animasi progress bar ini saya menggunakan properti animasi dengan CSS dan untuk mengubah tulisannya saya menggunakan sedikit JavaScript. Ya, sebenarnya kita bisa membuat ini murni hanya dengan kode CSS saja, tetapi kita harus menulis kode cssnya jadi lebih banyak lagi, itu sebabnya daripada cuma menggunakan CSS saja, mending saya pilih menggunakan kode JavaScript.
Saya yakin anda bisa membuat program ini dengan sangat mudah, jika anda ingin membuat program ini hanya menggunakan CSS saja, maka anda dapat membuatnya dengan tombol radio di HTML. Tapi untuk anda yang kesulitan untuk membuat program button dengan animasi progress bar ini, anda bisa langsung menggunakan kode yang sudah saya sediakan dibawah ini.
Source code:
<style>
.hmbuton{position:relative;height:45px;max-width:300px;width:100%;background:#7d2ae8;border-radius:6px;cursor:pointer;overflow:hidden;margin-top:15px}
.hmbuton::before{content:"top:0;left:-100%;height:100%;width:100%;background:rgba(0,0,0,.2);border-radius:0}
.hmbuton.hmprogress::before{animation:6s ease-in-out forwards hmprogress}
@keyframes hmprogress{0%{left:-100%}10%{left:-97%}20%{left:-92%}30%{left:-62%}40%{left:-38%}50%{left:-18%}60%{left:-14%}80%{left:-7%}90%{left:-3%}100%{left:0}}
.hmbuton .text-icon{height:100%;width:100%;display:flex;align-items:center;justify-content:center}
.hmbuton .text-icon svg{position:relative;fill:#ffffff;width:18px;height:18px}
.hmbuton .text-icon span{font-size:16px;font-weight:400;margin-left:8px;color:#fff}
</style>
<div class="hmbuton ">
<div class="text-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 19v-4h3l-4-5-4 5h3v4z"/><path d="M7 19h2v-2H7c-1.654 0-3-1.346-3-3 0-1.404 1.199-2.756 2.673-3.015l.581-.102.192-.558C8.149 8.274 9.895 7 12 7c2.757 0 5 2.243 5 5v1h1c1.103 0 2 .897 2 2s-.897 2-2 2h-3v2h3c2.206 0 4-1.794 4-4a4.01 4.01 0 0 0-3.056-3.888C18.507 7.67 15.56 5 12 5 9.244 5 6.85 6.611 5.757 9.15 3.609 9.792 2 11.82 2 14c0 2.757 2.243 5 5 5z"/></svg>
<span class="texs">Upload File</span>
</div>
</div>
<script>
const hmbuton = document.querySelector(".hmbuton"),
texs = document.querySelector(".texs");
hmbuton.addEventListener("click", ()=>{
hmbuton.classList.add("hmprogress");
texs.innerText = "Uploading...";
setTimeout(()=>{
hmbuton.classList.remove("hmprogress");
texs.innerText = "Uploaded";
},6000); //1000ms = 1detik (6000 = 6detik)
});
</script>