Ad Code

Ticker

6/recent/ticker-posts

Create a Button with Progress Bar animation in HTML CSS and JavaScript | easy tutorial | Abhicoder

Abhinav Mishra September 17, 2021

   Hey guys! Welcome back to a new post. in this post I am going to show you that how you can create a Uploading Animation Using HTML, CSS, and just 4 lines of JS (JavaScript). So let's begin!! Be till the end of the post. 😇


This is the video for it and this is the code for it.

Process:-

Frist open you favorite IDE. then create two files 'Index.html' and 'Style.css'. An then paste the HTML code in the 'Index.html' and the CSS code in 'Styel.css'. Then save the file by 'CTRL + s'. Now you can preview it in your browser.

CDN link is important!{alertInfo}

CDN link:-

Here is the CDN for the beautiful icons! You need to insert in the <head> section of the HTML.

URL:-

https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css {codeBox}

HTML type:-

<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css'  rel='stylesheet'>{codeBox}

HTML code:-

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Button with Progress Bar | Abhicoder </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="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 7s
       text.innerText = "Uploaded!!";
      },7000); //1000ms = 1s (7000ms = 7s)


    });
  </script>

</body>
</html>
{codeBox}


CSS code:-

@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: linear-gradient(57deg, #554f4f, #ccc);
}
.button{
  position: relative;
  height: 55px;
  max-width: 300px;
  width: 100%;
  background: #3b3a3a;
  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: 30px;
}
.button .text-icon span{
  font-size: 20px;
  font-weight: 400;
  margin-left: 8px;
}
{codeBox}


 Hope you all like this post. If yes the please SUBSCRIBE our channel. And hit the like button. See you in the nest post! 

Goodbye!


{contactForm}



Post a Comment

0 Comments

Ad Code