html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Download Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="button-container">
<h2 class="instruction-text">Click on zero <br>to see cool download button</h2>
<br>
<button class="button" id="downloadButton">
<svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 76">
<circle cx="38" cy="38" r="36" />
</svg>
<div class="content">
<span class="percentage" id="percentage">0%</span>
<div class="wave" id="wave"></div>
</div>
</button>
</div>
<script src="script.js"></script>
</body>
</html>
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* General styles */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #121212;
font-family: Arial, sans-serif;
}
/* Button container */
.button-container {
position: relative;
text-align: center; /* Center-align the instruction text */
}
/* Instruction text */
.instruction-text {
color: #00d8ff;
font-size: 18px;
margin-bottom: 10px; /* Space between text and button */
}
/* Button styling */
.button {
position: relative;
width: 120px;
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload=()=>{
const downloadButton = document.getElementById("downloadButton");
const percentageText = document.getElementById("percentage");
const circle = document.querySelector(".circle circle");
let progress = 0;
const totalLength = 226; // Full circumference of the circle
function simulateDownload() {
const interval = setInterval(() => {
progress += 2; // Increase progress by 2% every 50ms
if (progress <= 100) {
const dashOffset = totalLength - (progress / 100) * totalLength;
circle.style.strokeDashoffset = dashOffset;
percentageText.textContent = `${progress}%`;
} else {
clearInterval(interval);
completeDownload();
}
}, 50);
}
function completeDownload() {
downloadButton.classList.add("complete");
}
downloadButton.addEventListener("click", () => {
if (!downloadButton.classList.contains("complete")) {
BROWSER
Console
Run