بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Progress Bar dalam sebuah blog sebagai penghitung pekerjaan menggunakan angka yang dapat berubah dari angka 1 hingga angka 100. Biasanya format yang ditentukan adalah dalam bentuk persen %.
Semisal dalam sebuah download, maka trik ini bisa digunakan. Karena waktu download bisa menggunakan progress untuk mengetahui sudah sampai berapa persen proses download itu berlangsung.
Baca Juga : Membuat Scrollbar Mode Persen dengan CSS
Sampai detik ini sudah banyak blog yang menggunakannya, dan tidak sekedar berbentuk lingkaran semata, tapi juga bisa berbentuk kotak, oval dan lainnya tergantung kreasi dari masing-masing blogger yang menggunakannya.
Kalau saya sendiri menggunakan bentuk bulatan karena lebih enak dipandang tentu saja. Tetapi bukan berarti yang bentuk lain ternilai jelek, bukan. Hanya lebih enak dipandang mata saja bila menggunakan style bulatan.
Baca Juga : Animasi Warna Gradasi atau Gradient pada Scrollbar Navigasi Atas Header
Setelah mencoba mengotak-atik template yang ada di tutorial blog saya, ternyata hasilnya bagus dan mengesankan. Sehingga cara membuatnya pun saya buat postingan di blog ini. Dan silakan dipraktekkan.
Progress Bar Bentuk Lingkaran dengan CSS3
Seperti biasa masuk ke Template. Tapi pilih dulu Tema kemudian pilih Sesuaikan : Edit HTML lalu setelah masuk ke template, temukanlah kode ]]></b:skin>. Kemudian tempelkan kode dibawah ini di atas kode ]]></b:skin> yang sudah kamu temukan tersebut.
.container {
height: 400px;
width: 400px;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 8px;
box-shadow: 20px 20px 40px rgba(60, 60, 150, 0.25);
display: grid;
place-items: center;
}
.circular-progress {
position: relative;
height: 250px;
width: 250px;
border-radius: 50%;
display: grid;
place-items: center;
}
.circular-progress:before {
content: "";
position: absolute;
height: 84%;
width: 84%;
background-color: #ffffff;
border-radius: 50%;
}
.value-container {
position: relative;
font-family: "Poppins", sans-serif;
font-size: 50px;
color: #231c3d;
}Kemudian lanjut lagi ya. Temukan juga kode berikut </body>. Di posisi badan ini tempelkanlah kode dibawah ini tepat diatas kode </body>.
<script type='text/javascript'>
//<![CDATA[
let progressBar = document.querySelector(".circular-progress");
let valueContainer = document.querySelector(".value-container");
let progressValue = 0;
let progressEndValue = 100;
let speed = 50;
let progress = setInterval(() => {
progressValue++;
valueContainer.textContent = `${progressValue}%`;
progressBar.style.background = `conic-gradient(
#4d5bf9 ${progressValue * 3.6}deg,
#cadcff ${progressValue * 3.6}deg
)`;
if (progressValue == progressEndValue) {
clearInterval(progress);
}
}, speed);
//]]>
</script>Nah setelah itu barulah kita menuju ke Tata Letak kemudian pilih Tambah HTML/Javascript dan tempelkan juga kode dibawah ini di konten yang sudah tersedia disitu.
<div class="container">
<div class="circular-progress">
<div class="value-container">0%</div>
</div>
</div>Oke. Terakhir save pekerjaan kamu dan publikasikan. Lihat di halaman display blog kamu pasti sudah terlihat dengan cantik bulatan dengan animasi angka yang bisa berubah dari angka 1 hingga 100%. Selamat kamu berhasil. Terima kasih yang sudah mampir kesini di artikel Progress Bar Bentuk Lingkaran dengan CSS3. Salam dan sampai jumpa lagi di artikel berikutnya.
Lihat contoh jadinya di Codepen : @Alifacode
See the Pen Progress Bar Bentuk Lingkaran Mengesankan dengan CSS HTML dan Javascript by Alifacode (@Alifacode) on CodePen.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Progress Bar Bentuk Lingkaran dengan CSS3 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
