Button with progress bar indicates the animation performs after clicking on the button to show the user’s Download/Work is loading. Nowadays, this type of idea is getting used swiftly day by day because it takes less place on the webpage and looks very elegant.
In this project, I have created an easy code for you when you click on that button, its height and width will be converted into the progress bar and will start progressing. When the progressing bar is finished then that bar will be converted into the button. And those texts and icons also change.
Button with Progress Bar
To get the following HTML, CSS, and JavaScript program for the Button with Progress Bar, you require to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy and paste the below codes on your document/website.
HTML Code
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-replace-svg="nest"></script>
<h2> Click below to Download</h2>
<div class="btn">
<div class="soft">
<i class="fas fa-cloud-download-alt"></i>
<a href="#"> <span class="btn-text">Download</span></a>
</div>
</div>CSS Code
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
h2{text-align:center}
a{text-decoration:none}
.btn{
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
height: 95px;
width: 360px;
background: #1818f2;
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;
}
.btn.active{
height: 20px;
width: 500px;
}
.btn::before{
content: "";
position: absolute;
top: 0;
left: -100%;
height: 100%;
width: 100%;
background: #fa237d;
border-radius: 55px;
transition: all 6s ease-in-out;
}
.btn.active::before{
animation: layer 6s ease-in-out forwards;
}
@keyframes layer {
100%{
left: 0%;
}
}
.btn .soft{
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
transition-delay: 0.2s;
}
.btn.active .soft{
transform: translateY(60px);
}
.btn .soft i,
.btn .soft .btn-text{
color: #fff;
font-size: 40px;
font-weight: 500;
}
.btn .soft .btn-text{
font-size: 28px;
margin-left: 8px;
}
</style>JavaScript Code
<script>
const btn = document.querySelector(".btn");
btn.addEventListener("click", () =>{
btn.classList.add("active");
setTimeout(()=>{
btn.classList.remove("active");
btn.querySelector("i").classList.replace("bx-cloud-download", "bx-check-circle")
btn.querySelector("span").innerText = "Completed";
},6000);
});
</script>I am sure this type of project button with progress bar is easy for you if you are feeling difficulty building this program. You may need to learn the basics of HTML, CSS, and JavaScript then easy to understand the above code.