Follow Us On Telegram Telegram link
This is The Small Project For Your Site And You Can Use It Freely In Your's As Well , As It Is Copyright Free You Can...
In This Project Technologies Are Used Is As Follows :-)
- HTML
- CSS
- JAVASCRIPT
HTML
<!DOCTYPE html> <!-- Coding by CodingLab |www.youtube.com/CodingLabYT--> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>CodeAtNow | Button with Progress Bar</title> <link rel="stylesheet" href="style.css"> <!-- Boxiocns CDN Link --> <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'> </head> <body> <div class="button "> <div class="text-icon"> <i class="bx bx-cloud-upload"></i> <span class="text">Upload File</span> </div> </div> <script> const button = document.querySelector(".button"), text = document.querySelector(".text"); button.addEventListener("click", ()=>{ button.classList.add("progress"); text.innerText = "Uploading..."; setTimeout(()=>{ button.classList.remove("progress"); //remove progress after 6s text.innerText = "Uploaded"; },6000); //1000ms = 1s (6000 = 6s) }); </script> </body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins',sans-serif; } body{ height: 100vh; display: flex; align-items: center; justify-content: center; background: #11131e; } .button{ position: relative; height: 55px; max-width: 300px; width: 100%; background: #7d2ae8; border-radius: 6px; cursor: pointer; box-shadow: 0 5px 10px rgba(0,0,0,0.2); overflow: hidden; } .button::before{ content: ""; position: absolute; top: 0; left: -100%; height: 100%; width: 100%; background: rgba(0,0,0,0.2); border-radius: 6px; } .button.progress::before{ animation: progress 6s ease-in-out forwards; } @keyframes progress { 0%{ left: -100%; } 10%{ left: -97%; } 20%{ left: -92%; } 30%{ left: -82%; } 30%{ left: -62%; } 40%{ left: -38%; } 50%{ left: -18%; } 60%{ left: -14%; } 80%{ left: -7%; } 90%{ left: -3%; } 100%{ left: 0%; } } .button .text-icon{ height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } .button .text-icon i, .button .text-icon span{ position: relative; color: #fff; font-size: 26px; } .button .text-icon span{ font-size: 20px; font-weight: 400; margin-left: 8px; }