fikretyn
Üye
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
<div class="container" id="container">
<i class="fa-solid fa-down-long download"></i>
<h2 id="number"> </h2>
</div>
<script>
let download = document.querySelector('.download');
let container = document.getElementById('container');
let number = document.getElementById('number');
download.addEventListener('click', function(event){
download.classList.add('start');
let degree = 0;
let interval = setInterval(function(){
degree += 1;
if (degree > 100) {
clearInterval(interval);
number.innerHTML = '<i class="fa-solid fa-check"></i><br><small>100% Done</small>';
container.classList.add('done')
return;
}
container.style.background = `conic-gradient(#f5036c ${degree}%, #333 0%)`;
number.innerHTML = degree + '<span>%</span>'
},100)
})
</script>
</body>
</html>CSS
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: console;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222;
}
.container{
position: relative;
width: 200px;
height: 200px;
background: conic-gradient(#333 0%, #333 100%);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
overflow: hidden;
}
.container.done{
background: #0f0 !important;
}
.container::before{
content: '';
position: absolute;
inset: 15px;
border-radius: 50%;
background: #222;
opacity: 0.9;
}
.container #number{
position: relative;
color: #fff;
z-index: 100;
font-size: 3em;
text-align: center;
}
.container.done #number{
font-size: 5em;
line-height: 1em;
}
.container #number span{
font-size: 0.5em;
}
.container.done #number small{
position: absolute;
top: 10px;
font-size: 0.2em;
text-transform: uppercase;
white-space: nowrap;
font-weight: 500;
letter-spacing: 0.05em;
transform: translate(-50%,50%);
}
.download{
position: absolute;
top: 50%;
transform: translateY(-5);
color: #03a9f5;
font-size: 4em;
transition: 0.5s;
}
.download.start{
transform: translateY(160%);
}Not: Ben tembelim uğraşamam o yüzden indirip bakmak istiyorum diyenler içinde indirme linkini bırakıyorum..
Ekli dosyalar
Son düzenleme:
