Cara Membuat Progress Bar Lingkaran

Progress bar digunakan di berbagai situs web untuk menunjukkan pendidikan dan pengalaman. Kini admin akan membagikan tutorial membuat progress bar lingkaran dengan bantuan HTML CSS dan javascript. Dan disini, saya telah merancang Progress Bar lain dengan bantuan Bootstrap.

Pada gambar di atas saya telah memberikan contoh demo progres bar lingkaran untuk lebih memahami cara kerjanya. Di sini kalian dapat membuatnya dengan mengikuti cara di bawah ini.

Cara Membuat Progress Bar Lingkaran dengan HTML, CSS, dan Javascript

Jika Anda seorang pemula dan ingin tahu cara membuat Circle Progress Bar, ikuti tutorial di bawah ini.

Saya menggunakan beberapa tautan CDN untuk membuat ini. Yang pertama adalah JQuery dan yang kedua adalah easyPieChart. Saya telah memberikan tautan keduanya di bawah ini. Anda dapat menyalin tautan ini dan menambahkannya ke bagian kepala file HTML Anda.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.min.js"></script>

Langkah 1: Rancang latar belakang bilah kemajuan

Pertama-tama, saya mendesain latar belakang halaman web ini dan membuat kotak di dalamnya. Di kotak ini, saya meletakkan semua Progress Bar. Latar belakang halaman web: # 0d0c2d Saya telah memberikan warna biru dan menggunakan ketinggian 100vh.

<div class="container">
 
</div>

body {
  margin: 0;
  padding: 0;
  justify-content: center;
  height: 100vh;
  color:white;
  background: #0d0c2d;
  font-family: sans-serif;
  display: flex;
}

.container {
  background: #0d0c2d;
  padding: 60px;
  display: grid;
  grid-template-columns: repeat(1, 160px);
  grid-gap: 80px;
  margin: auto 0;
  box-shadow: -5px -5px 8px rgba(94, 104, 121, 0.288),
              4px 4px 6px rgba(94, 104, 121, 0.288);
}

Langkah 2: Tambahkan informasi dasar dengan kode HTML

Sekarang saya telah menambahkan semua elemen dari bilah kemajuan melingkar javascript ini menggunakan kode HTML. Di sini data-percent = “” digunakan untuk menentukan nilai progress bar lingkaran Anda. Saya memiliki 90% untuk HTML, 72% untuk CSS dan 81% untuk JavaScript. Jika Anda ingin mengubah, Anda dapat mengubah nilainya di sini.

Dengan ini, saya telah menggunakan teks yang akan membantu untuk mengetahui bilah mana yang berfungsi. Sekarang saya telah mengeksekusi Circular Progress Bar ini menggunakan kode jQuery. Untuk mengeksekusi kode jquery, saya terlebih dahulu menambahkan tautan CDN jquery.

 <div class="box">
    <div class="chart" data-percent="90" >90%</div>
    <h2>HTML</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="72" >72%</div>
    <h2>CSS</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="81" >81%</div>
    <h2>JAVASCRIPT</h2>
  </div>

Langkah 3: Aktifkan bilah kemajuan menggunakan jquery

Pertama saya menggunakan ukuran: 160 yang akan menentukan ukuran lingkaran ini.

~barColor: “# 36e617” Saya menggunakan yang akan menentukan warna progresif ini. Disini saya menggunakan warna hijau. Anda dapat menggunakan warna lain jika Anda mau.

~lineWidth: 15 pada dasarnya membantu menentukan ukuran garis warna di bilah ini.

~trackColor: “# 525151” di sini terutama untuk latar belakang lingkaran.

Saya telah menggunakan animate: 2000, yang berarti akan memakan waktu 2000 milidetik (2 detik) untuk membuat animasi. Akibatnya, saat Anda membuka halaman, Anda perlu dua detik untuk mencapai rata-rata yang Anda tetapkan dari nol.

$(function() {
  $('.chart').easyPieChart({
    size: 160,
    barColor: "#36e617",
    scaleLength: 0,
    lineWidth: 15,
    trackColor: "#525151",
    lineCap: "circle",
    animate: 2000,
  });
});

Langkah 4: Rancang judulnya

Saya merancang judul menggunakan kode CSS berikut.

.container .box {
  width: 100%;
}

.container .box h2 {
  display: block;
  text-align: center;
  color: #fff;
}

Langkah 5: Rancang teks persentase

Saya merancang dan memposisikan persentase yang saya gunakan di sini menggunakan kode CSS di bawah ini. Jika Anda telah melihat demonya, Anda akan mengerti bahwa teks di sini ditempatkan di tengah bilah kemajuan.

Digunakan text-align: center dan position: relative untuk ini. Saya menggunakan font-size: 40px dan warna putih untuk membuat ukuran teks sedikit lebih besar.

.container .box .chart {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 40px;
  line-height: 160px;
  height: 160px;
  color: #fff;
}

Langkah 6: Tentukan posisi lingkaran

Saya telah menentukan posisi bilah kemajuan melingkar ini menggunakan kode berikut. Untuk ini, saya telah menggunakan position: absolute dan left dan top zero.

.container .box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  width: 100%;
}

Langkah 7: Jadikan responsif dengan CSS

Sekarang, desain ini siap digunakan di situs web atau proyek Anda. Namun, saya telah membuatnya responsif untuk semua perangkat menggunakan beberapa kode CSS di bawah ini. Saya telah menggunakan @media CSS untuk ini. Kemudian saya telah menentukan bagaimana tampilannya untuk ukuran layar apa pun.

@media (min-width: 420px) and (max-width: 659px) {
  .container {
    grid-template-columns: repeat(2, 160px);
  }
}

@media (min-width: 660px) {
  .container {
    grid-template-columns: repeat(3, 160px);
  }
}

Semoga dari tutorial di atas, kalian dapat mengikuti langkah demi langkah bagaimana saya membuat progress bar lingkaran ini menggunakan HTML CSS dan javaScript.

Sekian untuk tutorial kali ini kunjungi terus website ini untuk mendapatkan tutorial lainnya.