html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body id="body">
<button onclick="download();" class="btn" id="btn">Download
</button>
<div id="afterdow">
<p>Downloaded !!!</p>
<p>Its just a sample</p>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
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
body {
margin:0;
padding:0;
text-align:center;
}
.btn{
width:100px;
padding:16px;
border:none;
color: white;
background-color: #0277bd ;
margin-top:50px;
border-radius:20px;
}
@keyframes complete{
0%{
background-color: #0277bd;
}
20%{
background-color: #1565c0;
}
40%{
background-color: #283593;
}
60%{
background-color: #4527a0;
Enter to Rename, Shift+Enter to Preview
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
function download() {
var body = document.getElementById("body");
var btn = document.getElementById("btn");
var elem = document.getElementById("bar");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
$("#btn").text(width + '%');
btn.style.webkitAnimation="complete 5s linear";
btn.style.animation="complete 5s linear";
body.style.animation="bgc 5s linear";
body.style.webkitAnimation="bgc 5s linear";
if(width===100){
$("#btn").text("OPEN");
btn.style.color="#222";
btn.style.border="2px solid #222"
btn.style.backgroundColor="white";
btn.disabled=true;
$("#afterdow").show('2000');
}
}
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run