Html Css Ve Js Ile Animasyonlu Download Butonu Örneği

fikretyn 

Moderatör
moderatör rank
Katılım
12 Mar 2024
Konular
38
Mesajlar
49
Tepkime puanı
23
Çevrimiçi zaman
14 saat 4 dakika
Konum
samsun
Ticaret
0 / 0 / 0
down.jpg

Bu linkten referans videoya gidebilirsiniz. Ama yok direk kodları almak isterseniz onlarda aşagıda sizi bekliyor.

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

  • down.jpg
    down.jpg
    24.2 KB · Görüntüleme: 1
  • download-CSS.rar
    1.5 KB · Görüntüleme: 1
Son düzenleme:
Katılım
11 Mar 2024
Konular
0
Mesajlar
10
Tepkime puanı
2
Çevrimiçi zaman
4 saat 39 dakika
Yaş
35
Konum
Bursa
Ticaret
0 / 0 / 0
Emekleriniz taktire şayan hocam teşekkürler bu güzel paylaşım için.
 
Konu Sahibi
fikretyn

fikretyn 

Moderatör
moderatör rank
Katılım
12 Mar 2024
Konular
38
Mesajlar
49
Tepkime puanı
23
Çevrimiçi zaman
14 saat 4 dakika
Konum
samsun
Ticaret
0 / 0 / 0
Teşekkür ederim
 
Ana Sayfa Kayıt Ol Giriş Yap
Üst