Cara Membuat Bar Kemajuan Pekeliling dengan CSS

Buat bar kemajuan cincin menggunakan CSS boleh dicapai melalui gradien conic atau clip-path dan putaran. Yang pertama sesuai untuk kemajuan kemas kini statik atau JavaScript, sementara yang terakhir lebih sesuai untuk animasi yang lancar; Membina penampilan bulat melalui pembolehubah CSS dan unsur-unsur pseudo, mengawal kemajuan dengan transformasi: berputar (), dan tambah peralihan untuk mencapai kesan animasi, menyokong warna tersuai, ketebalan dan tag pusat, dan pilih kaedah yang sesuai berdasarkan keserasian pelayar dan keperluan animasi.

Mewujudkan bar kemajuan bulat dengan CSS adalah cara yang bersih untuk mewakili kemajuan atau peratusan siap secara visual di laman web. Walaupun CSS tulen mempunyai batasan untuk kemas kini dinamik, anda boleh membina bar kemajuan pekeliling yang berfungsi dan animasi menggunakan gabungan CSS dan HTML yang minimum. Inilah caranya.

1. Gunakan pendekatan CSS sahaja dengan unsur-unsur pseudo dan putaran sempadan

Kaedah biasa menggunakan bekas dengan elemen pseudo yang berputar untuk mensimulasikan kemajuan kemajuan. Ini berfungsi dengan baik untuk bar statik atau separa dinamik (dikemas kini melalui kelas JavaScript).

Struktur HTML:

 <div class = "pekeliling-proses" style = "-Progress: 75;"> </div>

CSS:

 .circular-progress {
  lebar: 100px;
  Ketinggian: 100px;
  Radius sempadan: 50%;
  Latar Belakang: Conic-Gradient (
    #4CAF50 var (-Kemajuan),
    #e0e0e0 var (-kemajuan)
  );
  Kedudukan: Relatif;
}

.circular-progress :: sebelum {
  Kandungan: '';
  Kedudukan: Mutlak;
  Atas: 50%;
  Kiri: 50%;
  Transform: Terjemahan (-50%, -50%);
  lebar: 80%;
  Ketinggian: 80%;
  Latar Belakang: Putih;
  Radius sempadan: 50%;
}

Ini mewujudkan bulatan yang dipenuhi dengan peratusan yang ditakrifkan oleh pembolehubah CSS --progress (misalnya, 75% ). conic-gradient menarik arka berwarna, dan ::before pseudo-element topeng pusat untuk menjadikannya kelihatan seperti cincin.

NOTA: conic-gradient disokong dengan baik dalam pelayar moden tetapi mungkin memerlukan penolakan untuk yang lebih tua.

2. Buat bar kemajuan gaya cincin menggunakan sempadan dan laluan klip

Jika anda mahukan strok pekeliling nipis (seperti pemutar pemuatan), gunakan elemen bersempadan di dalam bekas yang dipotong.

Html:

 <div class = "progress-ring">
  <div class = "progress-fill"> </div>
</div>

CSS:

 .progress-ring {
  lebar: 100px;
  Ketinggian: 100px;
  Radius sempadan: 50%;
  Latar Belakang: #e0e0e0;
  Kedudukan: Relatif;
}

.progres-fill {
  Kedudukan: Mutlak;
  Lebar: 100%;
  Ketinggian: 100%;
  Radius sempadan: 50%;
  klip: rect (0px, 100px, 100px, 50px);
  Latar Belakang: #4CAF50;
  Transform: Putar (135Deg); / * Bermula dari atas */
}

.progress-fill :: sebelum {
  Kandungan: '';
  Kedudukan: Mutlak;
  Atas: 0;
  Kiri: 0;
  Lebar: 100%;
  Ketinggian: 100%;
  Radius sempadan: 50%;
  klip: rect (0px, 50px, 100px, 0px);
  Latar Belakang: #4CAF50;
  Transform: Putar (90Deg); / * Menyesuaikan berdasarkan kemajuan */
  Transform-asal: 50% 50%;
}

Untuk menghidupkan ini dengan peratusan tertentu (contohnya, 60%), anda akan mengira sudut putaran: 360 * (progress / 100) . Anda boleh mengemas kini ini melalui JavaScript dengan mengubah suai transform: rotate() nilai pada .progress-fill::before .

3. Tambahkan animasi dan peralihan yang lancar

Untuk menjadikan bar beredar dengan lancar apabila kemajuan berubah, gunakan peralihan CSS. Walau bagaimanapun, conic-gradient dan clip tidak secara langsung boleh dihidupkan, jadi anda boleh menghidupkan transform: rotate() pada elemen mengisi.

Contoh dengan animasi:

 .progress-fill :: sebelum {
  Peralihan: Transformasi 0.5s mudah;
}

Kemudian kemas kini putaran melalui JavaScript:

 const fill = document.QuerySelector ('. Progress-fill :: sebelum');
// tidak mungkin secara langsung - sebaliknya, gunakan pembungkus atau kelas togol

Pendekatan yang lebih baik: Bungkus mengisi bekas dan putarnya:

 <div class = "progress-ring">
  <div class = "progress-mask">
    <div class = "progress-fill"> </div>
  </div>
</div>

 .progress-mask {
  Kedudukan: Mutlak;
  Lebar: 100%;
  Ketinggian: 100%;
  klip: rect (0, 100px, 100px, 50px);
  transform: putar (0deg); / * Dikawal oleh js */
}

.progres-fill {
  Lebar: 100%;
  Ketinggian: 100%;
  Radius sempadan: 50%;
  Latar Belakang: #4CAF50;
}

Sekarang gunakan JavaScript untuk menetapkan putaran:

 fungsi setProgress (peratus) {
  const rotatedeg = peratus * 3.6; // 360 /100
  Document.QuerySelector ('. Progress-Mask'). Gaya.Transform = 
    `berputar ($ {rotatedeg} deg)`;
}

4. Sesuaikan penampilan

• Tukar ketebalan cincin dengan menyesuaikan potongan dalaman atau menggunakan sempadan.
• Tambah label di pusat menggunakan elemen kanak -kanak.
• Sokongan mereka dengan pembolehubah CSS:

   .circular-progress {
    -Progres: 50%;
    --fg-color: #4CAF50;
    --bg-color: #e0e0e0;
    Latar Belakang: Conic-Gradient (
      var (-fg-color) var (-kemajuan),
      var (-bg-color) var (-kemajuan)
    );
  }

  Pada asasnya, ia adalah campuran kecerunan pintar, keratan, dan putaran. Kaedah gradien conic adalah paling mudah untuk nilai statik atau js-updated. Untuk animasi yang lebih lancar, kaedah berputar klip-laluan memberikan lebih banyak kawalan. Pilih berdasarkan sokongan penyemak imbas dan keperluan animasi anda.

  Atas ialah kandungan terperinci Cara Membuat Bar Kemajuan Pekeliling dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!