Bagaimana untuk Mencipta Bar Kemajuan Pekeliling Pekeliling dengan SVG dan JavaScript?

Membuat Bar Pekeliling Peratus Kemajuan

Untuk mencipta bar kemajuan peratus bulat seperti yang dilihat dalam mockup, pertimbangkan untuk menggunakan SVG kerana fleksibilitinya dalam mencipta bentuk bulat.

Kod SVG:

<svg viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="251.2,0"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
    <animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/>           
  </path>
  <text>

CSS:

body {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

svg {
  width: 25%;
}

JavaScript (Pilihan):

Untuk menghidupkan kemajuan dan meningkatkan peratusan, gunakan kod jQuery berikut:

var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 5000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});

Hasil:

Kod SVG akan mencipta bar kemajuan bulat dengan latar belakang kuning dan penunjuk kemajuan putih. Animasi JavaScript akan meningkatkan peratusan yang dipaparkan di tengah-tengah bar kemajuan daripada 0 kepada 100% dalam tempoh 5 saat.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bar Kemajuan Pekeliling Pekeliling dengan SVG dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!