Đối tác của ANewPlus ANewTips Xem Ngay!

Nút có thanh tiến trình sử dụng HTML CSS và JavaScript

 



Xin chào các bạn, chào mừng đến với một dự án khác của HTML CSS và JavaScript. Hôm nay trong dự án này, chúng ta sẽ tạo ra một thiết kế và hoạt ảnh đẹp và hữu ích. Như bạn đã biết, tôi đã xây dựng rất nhiều Dự án JavaScript rất hữu ích và thiết thực.

Nút có thanh tiến trình có nghĩa là hoạt ảnh xuất hiện sau khi nhấp vào nút để hiển thị công việc của người dùng đang tải. Ngày nay, loại khái niệm này đang được sử dụng nhanh chóng hàng ngày vì nó chiếm ít không gian hơn trên trang web và trông rất đẹp.

Hãy xem hình ảnh đã cho của chương trình của chúng tôi [Nút có thanh tiến trình], nút đầu tiên bạn nhìn thấy sẽ là giao diện đầu tiên về dự án của bạn và khi chúng tôi nhấp vào nút đó, chiều cao và chiều rộng của nó sẽ được chuyển đổi thành nút thứ hai hình ảnh và các ngôi sao đang tiến triển. Khi thanh tiến trình hoàn thành tiến trình thì tiến trình đó được chuyển đổi thành nút. Và các văn bản và biểu tượng đó cũng thay đổi.




Bây giờ chúng ta sẽ xem hướng dẫn về Butonn này và hình ảnh động tiến triển của nó. Ngoài ra, chúng tôi sẽ lấy ý tưởng về cách tất cả HTML CSS và JavaScript đang hoạt động đằng sau dự án.

Nút có thanh tiến trình trong HTML CSS JavaScript | Hướng dẫn






Tôi đã cung cấp tất cả mã HTML CSS và JavaScript mà tôi phải có để tạo dự án này [Nút có Thanh tiến trình sử dụng HTML CSS và JavaScript], nhưng trước khi chuyển sang tệp mã nguồn, tôi đã chỉ ra một số điểm quan trọng của video hướng dẫn này của nút với thanh tiến trình.


Như chúng ta đã thấy trên video hướng dẫn của nút này với thanh tiến trình. Lúc đầu, chúng tôi chỉ thấy nút trên màn hình có văn bản và biểu tượng tải xuống. Khi tôi nhấp vào nút đó, nó sẽ biến thành một thanh tiến trình và bắt đầu hoạt ảnh. Cuối cùng khi thanh tiến trình hoàn thành hoạt ảnh của nó thì nó biến thành một nút với các văn bản và biểu tượng khác nhau.


Để thiết kế nút và thanh tiến trình, tôi chỉ sử dụng mã HTML và CSS, và để tạo hoạt ảnh cho nút và thanh tiến trình, tôi đã sử dụng một số mã JavaScript.

Tôi tin rằng loại dự án này là dễ dàng cho bạn, những bạn đang cảm thấy khó khăn trong việc xây dựng chương trình này [Nút có thanh tiến trình sử dụng HTML CSS và JavaScript], tôi đã cung cấp toàn bộ tệp mã nguồn HTML CSS và JavaScript bên dưới.


Để nhận mã HTML CSS và JavaScript sau cho Nút có Thanh tiến trình, bạn cần tạo hai tệp, một tệp là tệp HTML và tệp khác là tệp CSS. Sau khi tạo hai tệp này, bạn có thể sao chép và dán các mã đã cho vào tài liệu của mình. Bạn cũng có thể tải xuống tất cả các tệp mã nguồn từ nút tải xuống đã cho.



<!DOCTYPE html>
<!-- Designed by CodingLab | www.codinglabweb.com-->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <!--<title> Button with Progress Bar | CodingLab </title>->
    <link rel="stylesheet" href="style.css">
    <!-- Boxiocns CDN Link -->
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
   </head>
<body>
  <div class="button">
      <div class="content">
        <i class="bx bx-cloud-download"></i>
        <span class="button-text">Download</span>
      </div>
  </div>
  <script>
    const button = document.querySelector(".button");
    button.addEventListener("click", () =>{
      button.classList.add("active");
      setTimeout(()=>{
        button.classList.remove("active");
        button.querySelector("i").classList.replace("bx-cloud-download", "bx-check-circle")
        button.querySelector("span").innerText = "Completed";
      },6000);
    });
  </script>
</body>
</html>

@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;
}
.button{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 95px;
  width: 360px;
  background: #7D2AE8;
  border-radius: 55px;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  overflow: hidden;
}
.button.active{
  height: 20px;
  width: 500px;
}
.button::before{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: #5b13b9;
  border-radius: 55px;
  transition: all 6s ease-in-out;
}
.button.active::before{
  animation: layer 6s ease-in-out forwards;
}
@keyframes layer {
  100%{
    left: 0%;
  }
}
.button .content{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  transition-delay: 0.2s;
}
.button.active .content{
  transform: translateY(60px);
}
.button .content i,
.button .content .button-text{
  color: #fff;
  font-size: 40px;
  font-weight: 500;
}
.button .content .button-text{
  font-size: 28px;
  margin-left: 8px;
}

Post a Comment

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Lantro UI, you agreed to use cookies in agreement with the Lantro UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.