Top to Top Circle Progress dengan Persentase Keren
Top to Top Blogger Keren
"Berikut adalah kode untuk membuat Circle Progress dengan Persentase yang akan terisi secara otomatis saat pengunjung melakukan scroll.: ,"
"dan Sangat Keren dan Responsif dan Support Buat Template Blogger."
Untuk membuat Progress Bar yang berjalan otomatis dari 0% hingga 100% di bagian pajok kanan bawah halaman Blogger (top to top) dengan animasi yang halus, Anda bisa mengikuti langkah-langkah berikut:
Langkah 1:
Masukkan CSS Buka Blogger > Tema > Edit HTML. Tempelkan kode ini di atas ]]></b:skin>
SALIN
CSS
#scroll-percent {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
cursor: pointer;
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
color: #e52e71;
background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
conic-gradient(#e52e71 0%, #ff8a00 0%, #bbb 0%);
}
Langkah 2 :
Masukkan HTML Tempelkan kode ini tepat di bawah <body>
SALIN
HTML
<div id='scroll-percent' onclick='window.scrollTo({top: 0, behavior: "smooth"});'>
<span id='percent-value'>0%</span>
</div>
Langkah 3:
Masukkan JavaScript Tempelkan kode ini tepat di atas </body>
SALIN
JAVASCRIPT
<script>
window.addEventListener('scroll', function() {
var scrollLabel = document.getElementById('percent-value');
var scrollCircle = document.getElementById('scroll-percent');
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = Math.round((winScroll / height) * 100);
if (isNaN(scrolled)) scrolled = 0;
// Update Teks Angka
scrollLabel.innerText = scrolled + '%';
// Update Animasi Lingkaran
scrollCircle.style.background = `radial-gradient(closest-side, white 79%, transparent 80% 100%),
conic-gradient(#e52e71 ${scrolled}%, #bbb 0%)`;
// Sembunyikan jika di paling atas
scrollCircle.style.opacity = (scrolled > 0) ? "1" : "0";
scrollCircle.style.transition = "opacity 0.3s";
});
</script>
Fitur Keren yang Anda Dapatkan:
💛
1 Animasi Lingkaran:
Lingkaran akan terisi warna merah muda mengikuti scroll Anda.
2 Indikator Persentase:
Angka 0% hingga 100% muncul tepat di tengah lingkaran.
3 Back to Top:
Jika lingkaran diklik, halaman akan otomatis kembali ke atas dengan halus.
4 Auto Hide:
Lingkaran akan menghilang secara otomatis jika pengunjung berada di paling atas halaman (0%).
Terima Kasih Sudah Berkunjung!
Semoga artikel ini bermanfaat bagi Anda. Jangan ragu untuk meninggalkan komentar atau membagikan tulisan ini jika Anda menyukainya.
Posting Komentar untuk "Top to Top Circle Progress dengan Persentase Keren"