Persyaratan: Kami akan menemukan penggunaan berbagai bilah kemajuan selama pengembangan, karena ada berbagai bilah kemajuan di plugin saat ini. Untuk memfasilitasi pengembangan kami yang disesuaikan dan modifikasi gaya yang mudah, kami menggunakan gaya HTML dan CSS di sini fungsi batang .
Melalui artikel ini, kita akan memahami cara menggunakan HTML/CSS untuk membuat berbagai bilah kemajuan dasar dan bilah kemajuan mewah serta animasinya.
Buat bilah kemajuan melalui meteran tag HTML. Buat bilah kemajuan melalui kemajuan tag HTML. HTML Menerapkan batasan bilah kemajuan. Gunakan persentase dan gradien CSS untuk membuat bilah kemajuan biasa dan animasinya. bilah kemajuan berbentuk Gunakan CSS untuk membuat bilah kemajuan berbentuk bola.
Bilah kemajuan yang paling umum kita temui adalah bilah kemajuan horizontal. Ini adalah cara yang paling umum, terutama menggunakan HTML5 untuk menyediakan dua tag asli dan untuk mengimplementasikan bilah kemajuan.
Contoh spesifik meteran adalah sebagai berikut:
<p> <span>Kelengkapan:</span> <meter min="0" max="500" value="350">350 derajat</meter> </p>
Diantaranya, min, max, dan value masing-masing mewakili nilai maksimum, nilai minimum, dan nilai saat ini.
Mari kita lihat penggunaan tag:
<p> <label for="file">Kelengkapan:</label> <kemajuan max="100" value="70"> 70% </kemajuan> </p>
Diantaranya, atribut max menggambarkan jumlah total pekerjaan yang harus diselesaikan untuk tugas yang diwakili oleh elemen kemajuan, dan atribut value digunakan untuk menentukan jumlah pekerjaan yang telah diselesaikan oleh bilah kemajuan.
Perbedaan keduanya adalah sebagai berikut: Jadi pertanyaannya, kalau dilihat dari demo di atas, efek kedua label tersebut sama persis, lalu apa bedanya? Mengapa ada dua label yang tampak identik? Perbedaan terbesar antara kedua elemen ini adalah perbedaan semantik. Meter mewakili nilai pengukuran skalar atau nilai pecahan dalam rentang yang diketahui. Kemajuan mewakili kemajuan penyelesaian tugas. Misalnya, tingkat penyelesaian suatu persyaratan saat ini harus digunakan, dan jika Anda ingin menampilkan nilai kecepatan mobil saat ini dashboard, meteran harus digunakan.
Keterbatasan meteran & kemajuan Tentu saja, dalam kebutuhan bisnis atau lingkungan produksi aktual, Anda hampir tidak akan pernah melihat label meteran dan kemajuan. Kami tidak dapat secara efektif mengubah gaya meteran dan label kemajuan, seperti warna latar belakang, warna latar depan kemajuan, dll. Dan, yang paling fatal adalah performa gaya bawaan browser tidak konsisten antar browser yang berbeda. Ini adalah kelemahan besar bagi bisnis yang mengejar stabilitas dan kinerja UI yang konsisten! Kami tidak dapat menambahkan beberapa efek animasi dan efek interaktif ke dalamnya, karena dalam beberapa skenario aplikasi aktual, ini jelas bukan tampilan sederhana dari bilah kemajuan dan tidak lebih. Gunakan CSS untuk mengimplementasikan bilah kemajuan.
Oleh karena itu, pada tahap ini, lebih banyak metode CSS yang digunakan untuk mengimplementasikan bilah kemajuan.
(1) Cara paling umum menggunakan persentase untuk menerapkan bilah kemajuan adalah dengan menggunakan warna latar belakang yang dikombinasikan dengan persentase untuk membuat bilah kemajuan dengan gradien. Contoh DEMO paling sederhana adalah sebagai berikut:
<div kelas="g-kontainer"> <div kelas="g-kemajuan"></div> </div> <div kelas="g-kemajuan"></div>
Demikian pula, kita dapat menggunakan atribut gaya HTML untuk mengisi nilai latar belakang lengkap dan meneruskan persentase sebenarnya. Tentu saja, lebih disarankan untuk menggunakan atribut khusus CSS untuk meneruskan nilai CSS @property untuk mengubah kode kita:
<div class="g-progress" style="--progress: 70%"></div>
@properti --kemajuan {
sintaksis: '<persentase>';
mewarisi: salah;
nilai awal: 0%;
}
.g-kemajuan {
margin: otomatis;
lebar: 240 piksel;
tinggi: 25 piksel;
radius batas: 25 piksel;
latar belakang: gradien linier(90deg, #0f0, #0ff var(--kemajuan), transparan 0);
batas: 1 piksel padat #eee;
transisi: .3s --kemajuan;
}Intinya adalah menggunakan latar belakang gradien sudut: conic-gradient(): Contoh efeknya adalah sebagai berikut:
Kodenya adalah sebagai berikut:
<div class="lingkaran kemajuan"
v-for="(item,indeks) dalam Daftar Kemajuan" :key="index"
:gaya="{
latar belakang: `radial-gradient(#fff 55%, transparan 56%), conic-gradient(#3A7CFF ${item.rate}%, #f5f5f5 ${ item.rate && item.rate > 0 ? item.rate + 0.4 : 0 }%),radial-gradien(#fff 60%, #F1F3FC 0%);`
}
">
<span class="progress-value" >{{item.name}}</span>
<div kelas="totalvalbox" >
{{ harga barang }}%
</div>
</div>
<style lang="scss" cakupan>
.kemajuan-lingkaran {
posisi: relatif;
lebar: 149rpx;
tinggi: 149rpx;
keluarga font: PingFang SC;
radius perbatasan: 50%;
tampilan: fleksibel;
menyelaraskan-item: tengah;
justify-content: tengah;
}
.nilai kemajuan {
posisi: mutlak;
perataan teks: tengah;
tinggi garis: 50rpx;
lebar: 100%;
berat font: 400;
ukuran font: 26rpx;
}
.totalvalbox {
lebar minimum: 217rpx;
perataan teks: tengah;
posisi: mutlak;
bawah: -50rpx;
berat font: 400;
ukuran font: 30rpx;
}
</gaya>Masalah optimasinya adalah sebagai berikut:
Permasalahan yang cenderung muncul disini adalah sebagai berikut: Keterbatasan implementasi gradien sudut pada progres busur. Tentu saja metode ini memiliki dua kelemahan. Tentu saja, jika persentase kemajuannya tidak sama dengan angka seperti 0°, 90°, 180°, 270°, 360°, saat menggunakan gradien sudut, akan ada tepi bergerigi yang jelas pada sambungan antara warna yang berbeda. Ambil contoh conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D):
Solusi untuk masalah tersebut adalah dengan menyisakan ruang gradien pada titik koneksi. Mari kita ubah kode gradien sudut di atas:
{
- latar belakang: gradien kerucut(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)`
+ latar belakang: gradien berbentuk kerucut(#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)`
}Perhatikan baik-baik kode di atas. Perubahan dari 27% menjadi 27% diubah dari 27% menjadi 27,2%. Tambahan 0,2% adalah untuk menghilangkan aliasing.
Dalam beberapa kasus, kita akan menemukan bilah kemajuan dengan sudut membulat di ujung bilah kemajuan. Tentu saja, situasi ini juga dapat diatasi jika warna bilah kemajuan adalah warna solid lingkaran kecil di awal dan akhir. Jika bilah kemajuan berwarna gradien, bilah kemajuan ini perlu diimplementasikan dengan bantuan SVG/Canvas
Contohnya adalah sebagai berikut:
html
<div kelas="g-kemajuan"></div> <div kelas="g-kontainer"> <div kelas="g-kemajuan"></div> <div kelas="g-circle"></div> </div>
css
isi, html {
lebar: 100%;
tinggi: 100%;
tampilan: fleksibel;
}
.g-wadah {
posisi: relatif;
margin: otomatis;
lebar: 200 piksel;
tinggi: 200 piksel;
}
.g-kemajuan {
posisi: relatif;
margin: otomatis;
lebar: 200 piksel;
tinggi: 200 piksel;
radius perbatasan: 50%;
latar belakang: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
topeng: gradien radial(transparan, transparan 80px, #000 80.5px, #000 0);
}
.g-lingkaran {
posisi: mutlak;
atas: 0;
kiri: 0;
&::sebelum,
&::setelah {
isi: "";
posisi: mutlak;
atas: 90 piksel;
kiri: 90 piksel;
lebar: 20 piksel;
tinggi: 20 piksel;
radius perbatasan: 50%;
latar belakang: #FFCDB2;
indeks-z: 1;
}
&::sebelum {
transformasi: terjemahkan(0, -90px);
}
&::setelah {
transformasi: putar(90 derajat) terjemahkan(0, -90px);
}
}Berdasarkan ekstensi ini, Anda juga dapat menerapkan bilah kemajuan berbentuk busur multi-warna: (Ini mungkin tidak terlihat seperti bilah kemajuan, tetapi lebih mirip dengan diagram lingkaran )
.g-kemajuan {
lebar: 160 piksel;
tinggi: 160 piksel;
radius perbatasan: 50%;
topeng: gradien radial(transparan, transparan 50%, #000 51%, #000 0);
latar belakang:
gradien berbentuk kerucut(
#FFCDB2 0, #FFCDB2 25%,
#B5838D 25%, #B5838D 50%,
#673ab7 50%, #673ab7 90%,
#ff5722 90,2%, #ff5722 100%
);
}Bilah kemajuan berbentuk bola juga relatif umum, mirip dengan berikut ini:
Kode intinya adalah sebagai berikut: Cukup kendalikan ketinggian gelombang ketika wadah berbentuk bola menunjukkan kemajuan 0% - 100%. Kita bisa mendapatkan efek animasi dari 0% - 100%
<div kelas="wadah">
<div class="gelombang-perubahan"></div>
<div kelas="gelombang"></div>
</div>
.wadah {
lebar: 200 piksel;
tinggi: 200 piksel;
batas: 5px rgb padat(118, 218, 255);
radius perbatasan: 50%;
meluap: tersembunyi;
}
.gelombang-perubahan {
posisi: mutlak;
lebar: 200 piksel;
tinggi: 200 piksel;
kiri: 0;
atas: 0;
animasi: ubah linier tak terbatas 12 detik;
&::sebelum,
&::setelah{
isi: "";
posisi: mutlak;
lebar: 400 piksel;
tinggi: 400 piksel;
atas: 0;
kiri: 50%;
warna latar belakang: rgba(255, 255, 255, .6);
radius batas: 45% 47% 43% 46%;
transformasi: terjemahkan(-50%, -70%) putar(0);
animasi: putar 7 detik linier tak terbatas;
indeks-z: 1;
}
&::setelah {
radius batas: 47% 42% 46% 44%;
warna latar belakang: rgba(255, 255, 255, .8);
transformasi: terjemahkan(-50%, -70%) putar(0);
animasi: putar 9 detik linier -4 detik tak terbatas;
indeks-z: 2;
}
}
.melambai {
posisi: relatif;
lebar: 200 piksel;
tinggi: 200 piksel;
warna latar belakang: rgb(118, 218, 255);
radius perbatasan: 50%;
}
P {
posisi: mutlak;
atas: 50%;
kiri: 50%;
transformasi: terjemahkan(-50%, -50%);
ukuran font: 36 piksel;
warna: #000;
indeks-z: 10;
}
@keyframes memutar {
ke {
transformasi: terjemahkan(-50%, -70%) putar(360deg);
}
}
@keyframes berubah {
dari {
atas: 80 piksel;
}
ke {
atas: -120 piksel;
}
}Tentu saja, CSS selalu berubah, dan jenis bilah kemajuan tidak terbatas pada kategori di atas. Misalnya, kita dapat menggunakan filter untuk meniru animasi pengisian daya pada ponsel Huawei, yang juga merupakan cara menampilkan bilah kemajuan dan juga dapat diimplementasikan menggunakan CSS murni:
Kode intinya adalah sebagai berikut
<div kelas="g-kontainer">
<div class="g-number">98,7%</div>
<div class="g-kontras">
<div kelas="g-circle"></div>
<ul class="g-gelembung">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
html,
tubuh {
lebar: 100%;
tinggi: 100%;
tampilan: fleksibel;
latar belakang: #000;
meluap: tersembunyi;
}
.g-angka {
posisi: mutlak;
lebar: 300 piksel;
teratas: 27%;
perataan teks: tengah;
ukuran font: 32px;
indeks-z: 10;
warna: #fff;
}
.g-wadah {
posisi: relatif;
lebar: 300 piksel;
tinggi: 400 piksel;
margin: otomatis;
}
.g-kontras {
filter: kontras(10) putaran warna(0);
lebar: 300 piksel;
tinggi: 400 piksel;
warna latar belakang: #000;
meluap: tersembunyi;
animasi: hueRotate 10s linear tak terbatas;
}
.g-lingkaran {
posisi: relatif;
lebar: 300 piksel;
tinggi: 300 piksel;
ukuran kotak: kotak perbatasan;
filter: kabur(8px);
&::setelah {
isi: "";
posisi: mutlak;
atas: 40%;
kiri: 50%;
transformasi: terjemahkan(-50%, -50%) putar(0);
lebar: 200 piksel;
tinggi: 200 piksel;
warna latar belakang: #00ff6f;
radius batas: 42% 38% 62% 49% / 45%;
animasi: memutar 10 detik linier tak terbatas;
}
&::sebelum {
isi: "";
posisi: mutlak;
lebar: 176 piksel;
tinggi: 176 piksel;
atas: 40%;
kiri: 50%;
transformasi: terjemahkan(-50%, -50%);
radius perbatasan: 50%;
warna latar belakang: #000;
indeks-z: 10;
}
}
.g-gelembung {
posisi: mutlak;
kiri: 50%;
bawah: 0;
lebar: 100 piksel;
tinggi: 40 piksel;
transformasi: terjemahkan(-50%, 0);
radius batas: 100px 100px 0 0;
warna latar belakang: #00ff6f;
filter: kabur(5 piksel);
}
li {
posisi: mutlak;
radius perbatasan: 50%;
latar belakang: #00ff6f;
}
@untuk $i dari 0 sampai 15 {
li:anak ke-n(#{$i}) {
$lebar: 15 + acak(15) + piksel;
kiri: 15 + acak(70) + piksel;
atas: 50%;
transformasi: terjemahkan(-50%, -50%);
lebar: $lebar;
tinggi: $lebar;
animasi: moveToTop #{random(6) + 3}s kemudahan masuk -#{random(5000)/1000}s tak terbatas;
}
}
@keyframes memutar {
50% {
radius batas: 45% / 42% 38% 58% 49%;
}
100% {
transformasi: terjemahkan(-50%, -50%) putar(720deg);
}
}
@keyframes moveToTop {
90% {
opacity: 1;
}
100% {
opacity: .1;
transformasi: terjemahkan(-50%, -180px);
}
}
@keyframes hueRotate {
100% {
filter: kontras(15) putaran warna(360deg);
}
}Terakhir, saya merekomendasikan beberapa bilah kemajuan yang bagus, berkualitas tinggi, dan keren.
Implementasi lengkap dari efek di atas dapat diklik - gunakan CSS dengan cerdik untuk menghasilkan animasi pengisian daya yang keren
Ini menyimpulkan artikel ini tentang cara mengimplementasikan berbagai fungsi bilah kemajuan melalui HTML/CSS. Sekian untuk pendahuluan artikel. Untuk konten bilah kemajuan html css terkait lainnya, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait di bawah.