Pada halaman web, efek batang kemajuan sering terlihat, seperti membagi dua sistem, status pemuatan, dll. Komponen batang kemajuan menggunakan atribut transisi dan animasi CSS3 untuk menyelesaikan beberapa efek khusus. Efek khusus ini tidak didukung dalam versi IE9 dan di bawah IE9 dan Firefox, dan Opera 12 tidak mendukung atribut animasi.
Bilah kemajuan seperti komponen independen lainnya, pengembang dapat memilih versi yang sesuai sesuai dengan kebutuhan mereka:
Kurang: progres-bar
Sass: _progress-bars.scss
Bilah kemajuan dasar
Prinsip Implementasi:
Dua wadah diperlukan. Wadah luar menggunakan nama kelas. Progress dan subcontainer menggunakan nama kelas. Progress-bar; di mana .progress digunakan untuk mengatur warna latar belakang wadah batang kemajuan, tinggi, jarak, dll.; dan .Progress-bar menetapkan arah kemajuan, warna latar belakang dan efek berlebihan dari bilah kemajuan; Berikut ini adalah kode sumber CSS:
Kemajuan {tinggi: 20px; margin-bottom: 20px; overflow: tersembunyi; latar belakang-warna: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba (0, 0, 0, .1); kotak-diterjemahkan: inset 0 1px 2px (0, 0, 0, .1); Kotak-ditangguhkan: inset 0 1px 2px 2px (0, 0, 0, .1); Kotak-ditangguhkan: inset 0 1px 2px 2px (0, 0, 0,. {float: left; lebar: 0; tinggi: 100%; font-size: 12px; line-height: 20px; warna: #ffff; text-align: center; latar belakang-color: #428bca; -webkit-box-shadow: inset 0 -1px 0 rgba (0, 0, 0, .15), 0 -1px 0 rgba (0, 0, 0 ,.15), 0 -1px 0 RGBA (0, 0, 0 ,.15); .15);-Webkit-transisi: lebar .6 Kemudahan; Transisi: Lebar .6 Kemudahan;}contoh:
<dv> <div role = "progressBar" aria-valuenow = "30" aria-valuemin = "0" aria-valuemax = "100"> <span> 30%</span> </div> </div>
Fungsi atribut peran: Memberitahu mesin pencari bahwa fungsi div ini adalah bilah kemajuan;
ARIA-VALUENOW = "30" Fungsi Atribut: Kemajuan Bilah Kemajuan Saat Ini adalah 40%;
ARIA-VALUEMIN = ”0” Fungsi Atribut: Nilai minimum bilah kemajuan adalah 0%;
ARIA-VALUEMAX = "100" Fungsi Atribut: Nilai maksimum bilah kemajuan adalah 100%;
Anda dapat menghapus tag <span> dengan kelas .sr saja yang diatur dari komponen bilah progress untuk membiarkan kemajuan saat ini ditampilkan;
<dv> <div role = "progressBar" aria-valuenow = "40" aria-valuemin = "0" aria-valuemax = "100"> 40%</div> </div>
Bilah kemajuan warna -warni
Bilah kemajuan berwarna sama dengan bilah kemajuan peringatan. Untuk memberi pengguna pengalaman yang lebih baik, warna bilah kemajuan yang berbeda juga dikonfigurasi sesuai dengan keadaan yang berbeda, terutama termasuk empat jenis berikut:
Progress-Bar-Info: mewakili bilah kemajuan informasi, biru
Progress-Bar-Success: Menunjukkan Sukses Progress Bar, Green
Peringatan Progres-Bar: Menunjukkan Bilah Kemajuan Peringatan, Kuning
Progress-Bar-Danger: Menunjukkan bilah kemajuan kesalahan, merah
Kode Sumber CSS:
.progress-bar-success {latar belakang-warna: #5cb85c;}. progres-bar-info {latar belakang-warna: #5bc0de;}. Progress-bar-warning {latar belakang-warna: #f0ad4e;}. Progress-Bar-Danger {latar belakang-warna: #d9534f;}Bagaimana menggunakan:
Cukup tambahkan nama kelas yang sesuai ke bilah kemajuan dasar
contoh:
<H1> Bilah Kemajuan Berwarna-warni </h1> <dv> <Div Role = "ProgressBar" ARIA-VALUENOW = "25" ARIA-VALUEMIN = "0" ARIA-VALUEMAX = "100"> 25%</Div> </Div> <Div> <Div Role = "Progressbar" ARIA-VALUEMAX = "40" 40 " ARIA-VALUEMAX = "0"> 40%</div> </div> <div> <div role = "progressBar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</div> </div> <Div> <Div rane = "progresbir = 100"> 80%</div> </div> <Div> <Div Role = "Progressbir" = 10 "ARIA = 40" VALIA-40 "40 aria-valuemin = "0"> 60%</div> </div>
Efeknya adalah sebagai berikut:
Bilah kemajuan bergaris
Bilah progres bergaris menggunakan gradien linier CSS3. Itu tidak menggunakan gambar apa pun. Menggunakan bilah progres bergaris hanya membutuhkan penambahan nama kelas "misi kemajuan" ke wadah bilah kemajuan. Kemajuan. Jika Anda ingin membuat garis kemajuan seperti kemajuan warna dan memiliki efek warna, Anda hanya perlu menambahkan nama kelas warna yang sesuai ke bilah kemajuan.
Berikut ini adalah kode sumber gaya .Progress-striped:
.Progress-striped .progress-bar {latar belakang-gambar: -webkit-linear-gradient (45deg, RGBA (255, 255, 255, .15) 25%, transparan 25%, transparan 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15), RGBA (255, 255, 255, 255,. 75%, transparent 75%, transparent );background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparan); ukuran latar belakang: 40px 40px;}Setiap negara yang sesuai dengan kemajuan garis juga memiliki warna yang berbeda
.Progress-striped .Progres-Bar-Success {latar belakang-gambar: -webkit-linear-gradient (45deg, RGBA (255, 255,. transparent 75%, transparent 75%, transparent );background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 25%, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, .15) 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}.progress-striped .progress-bar-warning {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255. 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 25%, 25%, transparan 50%, transparan 50%, RGBA (255, 255, 255, 25%), 25%transparan, 25%, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, .15) 75%, transparan 75%, transparan); RGBA (255, 255, 255, .15) 75%, transparan 75%, transparan);}. Progres-striped .Progress-Bar-Danger {latar belakang-gambar: -Webkit-linear-gradient (45deg, RGBA (255, 255, 255, 255, .15) 25%, 25%, 25%, 25%, 25%, 255, 255, 255, 255, .15) 25%, 25%, 25%, 25%, 25%, 25%, 255, 255, 255, 255, 255, 255, .15), 25%, 255, .15) 50%, rgba(255, 255, .15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, .15) 25%, transparan 25%, transparan 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, transparan 75%, transparan);.Mari kita lihat penggunaan bilah kemajuan bergaris:
<H1> Bilah kemajuan bergaris </h1> <dv> <div role = "progressBar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 25%</div> </Div> <ver aRax = "progressbar" ARIA-VALUEMAX = "40" 40 " ARIA-VALUEMAX = "0"> 40%</div> </div> <div> <div role = "progressBar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</div> </div> <Div> <Div rane = "progresbir = 100"> 80%</div> </div> <Div> <Div Role = "Progressbir" = 10 "ARIA = 40" VALIA-40 "40 aria-valuemin = "0"> 60%</div> </div>
Bilah kemajuan garis dinamis
Bilah kemajuan garis dinamis dapat direalisasikan berdasarkan bilah kemajuan. Progress dan .Progress-striped dua kelas, menambahkan nama kelas. Aktif.
Prinsip implementasi terutama dicapai melalui animasi CSS3. Pertama, animasi stripes-batang-progres dibuat melalui @keyframes. Animasi ini terutama melakukan satu hal, yaitu mengubah posisi gambar latar belakang, yaitu nilai posisi latar belakang. Karena bilah kemajuan bergaris dibuat melalui gradien linier CSS3, dan linear-gradient mengimplementasikan gambar latar belakang yang sesuai dengan latar belakang
Ini kode sumber CSS:
@-webkit-keyframes progres-bar-stripes {from {latar belakang-posisi: 40px 0;} ke {latar belakang-posisi: 0 0;}@keyframes progres-bar-stripes {dari {latar belakang-posisi: 40px 0;} ke {latar belakang-posisi: 0 0;}} {latar belakang: 40px;@KeyFrames hanya menciptakan efek animasi. Jika kita ingin bilah kemajuan benar-benar bergerak, kita perlu menyebut animasi "progres-bar-strip" yang dibuat oleh @keyframes dengan cara tertentu, dan memicu animasi untuk mulai berlaku melalui suatu acara. Dalam kerangka Bootstrap, tambahkan nama kelas "aktif" ke wadah progress batang "kemajuan" dan biarkan pemuatan dokumen diselesaikan dan sentuh animasi "progres-bar-strip" agar berlaku
Kode gaya yang sesuai untuk animasi panggilan adalah sebagai berikut:
.progress.active .progress-bar {-webkit-animasi: progres-bar-stripes 2s linear tak terbatas; animasi: progres-batang-stripes 2s linear tak terbatas;}contoh:
<H1> Bilah kemajuan garis dinamis </h1> <div> <div role = "progressBar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 25%</div> </div> <Div> <Div Role = "Progressbar" ARIA-Valuax = "" ARIAX = "ARIAX =" Progressbar "ARIA-VALUEMAX =" ARIA-VALUEMAX = "0"> 40%</div> </div> <div> <div role = "progressBar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</div> </div> <Div> <Div rane = "progresbir = 100"> 80%</div> </div> <Div> <Div Role = "Progressbir" = 10 "ARIA = 40" VALIA-40 "40 aria-valuemin = "0"> 60%</div> </div>
Efeknya adalah sebagai berikut (karena ini adalah gambar yang datang langsung dari hasil di halaman web, ia tidak dapat melihat efek dinamisnya di sini):
Cascade Progress Bar:
Kemajuan susun dapat menyatukan bilah kemajuan yang tidak kompatibel dan mengaturnya secara horizontal.
contoh:
<div> <viv> </div> <viv> </div> <viv> </div> <viv> </div> <ver> </div>
Selain menumpuk batang kemajuan warna, Anda juga dapat menumpuk batang kemajuan bergaris, atau mencampur dan menumpuk batang kemajuan bergaris -garis dengan batang kemajuan warna. Anda hanya perlu menambahkan bilah kemajuan yang sesuai ke wadah "kemajuan". Perhatikan juga bahwa jumlah batang kemajuan yang ditumpuk tidak dapat lebih besar dari 100%.
Mari kita lihat contoh:
<dv> <vet> </div> <verv> </div> <v div> </div> <viv> </div> <verv> </div> <verv> </div> <v div> </div> <div> </div> </Div> </Div> </Div> </Div> <Div> </Div> </Div> </Div> </Div> <Div> </Div> </Div> </Div> </Div> <Div> </Div> </Div>
Ini adalah penjelasan terperinci tentang pengetahuan komponen batang progres bootstrap. Saya harap ini akan membantu semua orang!