HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" btn-area="IE=edge">
<meta name="viewport" btn-area="width=device-width, initial-scale=1.0">
<title>Download Button with Progress Animation using HTML CSS and JavaScript</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="btn-area">
<i class="fa fa-download"></i>
</div>
</div>
<script>
let X = document.querySelector(".wrapper");
X.addEventListener("click", ()=>{
X.classList.add("active");
setTimeout(()=>{
X.classList.remove("active");
document.querySelector("i").classList.replace("fa-download", "fa-check");
},8000
)
})
</script>
</body>
</html>
CSS CODE:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #060211;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 80px;
width: 80px;
background: #060411;
border-radius: 50px;
transition: all 0.4s cubic-bezier(.3, -.7, .355, 1.352);
overflow: hidden;
box-shadow: 0 0 20px #66d7f3, 0 0 400px #0072ff, 0 0 80px #f3f17f, 0 0 1000px #6a6799;
}
.wrapper .btn-area {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper .btn-area i {
color: #cf0d0d;
font-size: 35px;
}
.wrapper::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
border-radius: 50px;
background: #cf0d0d;
}
.wrapper.active {
height: 15px;
width: 1000px;
}
.wrapper.active::before {
animation: animate 7s ease-in-out forwards;
}
.wrapper.active .btn-area {
transform: translateY(80px);
}
.wrapper .btn-area {
transition: all 0.8s ease;
}
@keyframes animate {
100% {
left: 0%;
}
}
Comments
Post a Comment