Bagaimana untuk Menghentikan Bulatan Kemajuan CSS pada Peratusan Tertentu?

Kalangan Kemajuan CSS: Mengawal Pemberhentian Peratusan

Menggunakan CSS, anda boleh membuat kalangan kemajuan yang secara visual menunjukkan tahap kemajuan. Biasanya, bar kemajuan memenuhi seluruh bulatan apabila mencapai 100% siap. Walau bagaimanapun, anda mungkin menghadapi situasi di mana anda perlu menghentikan bulatan kemajuan pada peratusan tertentu.

Untuk mencapai matlamat ini, kami boleh memanfaatkan keratan CSS dan animasi. Mari pecahkan kod yang disediakan dalam biola:

.wrapper {
  width: 100px;
  height: 100px;
  position: absolute;
  clip: rect(0px, 100px, 100px, 50px);
}

Kelas .wrapper mentakrifkan bekas luar yang akan memegang bulatan kemajuan. Kami menetapkan lebar dan tinggi kepada 100px dan meletakkannya secara mutlak. Yang penting, kami menggunakan sifat klip untuk menyembunyikan separuh daripada bar kemajuan (rect(0px, 100px, 100px, 50px)).

.circle {
  width: 80px;
  height: 80px;
  border: 10px solid green;
  border-radius: 50px;
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
}

Dalam .wrapper, kami mencipta bulatan kemajuan sebenar menggunakan . kelas bulatan. Kami memberikan saiz dan gaya yang diingini dengan sempadan hijau dan sudut bulat. Satu lagi sifat klip penting digunakan untuk menjadikan bulatan kelihatan hanya dalam separuh kanan bekas.

Kod selebihnya menggunakan animasi CSS dan atribut data untuk mengawal gelagat bulatan kemajuan. Dengan melaraskan sifat klip dalam bingkai utama, kita boleh mengehadkan pergerakan bulatan kepada peratusan tertentu. Contohnya, dalam biola, bulatan melengkapkan separuh putaran untuk berhenti pada 50%.

Dengan menggabungkan teknik ini, anda boleh mencipta bulatan kemajuan CSS yang secara dinamik menunjukkan peratusan penyiapan tanpa gelung animasi.

Atas ialah kandungan terperinci Bagaimana untuk Menghentikan Bulatan Kemajuan CSS pada Peratusan Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!