Dalam halaman web, kesan bar kemajuan sering dilihat, seperti: sistem belah dua, status pemuatan, dll. Komponen bar kemajuan menggunakan atribut peralihan dan animasi CSS3 untuk melengkapkan beberapa kesan khas ini dalam IE9 dan versi di bawah, Firefox Ia tidak disokong dalam versi lama, dan Opera 12 tidak menyokong atribut animasi.
Bar kemajuan adalah sama seperti komponen bebas yang lain Pembangun boleh memilih versi yang sepadan mengikut keperluan mereka sendiri:
KURANG: bar kemajuan.kurang
SASS: _progress-bars.scss
Bar kemajuan asas
Prinsip pelaksanaan:
Dua bekas diperlukan. Bekas luar menggunakan nama kelas .progress, dan sub-container menggunakan nama kelas .progress-bar .progress digunakan untuk menetapkan warna latar belakang bekas bar kemajuan, ketinggian dan jarak bekas, dsb.; dan bar .progress menetapkan arah kemajuan, warna latar belakang dan kesan peralihan bar kemajuan yang berikut ialah kod sumber css:
progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #428bca;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
transition: width .6s ease;
}Contoh:
<div class="progress"> <div class="progress-bar" style="width:30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">30%</span> </div> </div>
Atribut peranan: Beritahu enjin carian bahawa div ini berfungsi sebagai bar kemajuan; Fungsi atribut
aria-valuenow="30": bar kemajuan semasa ialah 40%; Fungsi atributaria-valuemin="0": nilai minimum bar kemajuan ialah 0%; Fungsi atribut
aria-valuemax="100": nilai maksimum bar kemajuan ialah 100%;Anda boleh mengalih keluar teg dengan kelas .sr sahaja daripada komponen bar kemajuan dan biarkan kemajuan semasa dipaparkan;
<div class="progress"> <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" >40%</div> </div>
Bar kemajuan berwarna adalah sama dengan bar kemajuan amaran Untuk memberi pengguna pengalaman yang lebih baik, warna bar kemajuan yang berbeza dikonfigurasikan mengikut keadaan yang berbeza, terutamanya termasuk empat jenis berikut: . progress-bar-info: menunjukkan bar kemajuan maklumat, biru
progress-bar-success: menunjukkan bar kemajuan yang berjaya, hijauamaran-bar-kemajuan: menunjukkan bar kemajuan amaran, kuning
progress-bar-bahaya: menunjukkan ralat bar kemajuan, merah
kod sumber css:
Cara menggunakan:
Bar kemajuan berwarna
.progress-bar-success {
background-color: #5cb85c;
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-bar-danger {
background-color: #d9534f;
}
Kesannya adalah seperti berikut:
<h1>彩色进度条</h1> <div class="progress"> <div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div> </div>
Bar kemajuan berjalur dilaksanakan menggunakan kecerunan linear CSS3 tanpa menggunakan sebarang gambar Untuk menggunakan bar kemajuan berjalur, cuma tambahkan nama kelas "berjalur kemajuan" pada bekas.kemajuan bar kemajuan jalur kemajuan untuk diwarnakan Kemajuan adalah sama, dengan kesan warna, cuma tambahkan nama kelas warna yang sepadan pada bar kemajuan Berikut ialah kod sumber gaya berjalur .progress:
Setiap keadaan yang sepadan dengan kemajuan jalur juga mempunyai warna yang berbeza
Bar kemajuan berjalur
.progress-striped .progress-bar {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 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, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}Mari kita lihat aplikasi bar kemajuan berjalur:
.progress-striped .progress-bar-success {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 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, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-info {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 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, 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, .15) 25%, transparent 25%, transparent 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, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-danger {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 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, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}<h1>条纹进度条</h1> <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div> </div>
Bar kemajuan berjalur dinamik
Berdasarkan dua kelas bar kemajuan .progress dan .progress-belang, menambah nama kelas .active boleh merealisasikan bar kemajuan berjalur dinamik. Prinsip pelaksanaan terutamanya dicapai melalui animasi CSS3. Pertama, animasi jalur-bar kemajuan dicipta melalui @keyframes Animasi ini melakukan satu perkara, iaitu menukar kedudukan imej latar belakang, iaitu nilai kedudukan latar belakang. Kerana bar kemajuan berjalur dibuat melalui kecerunan linear CSS3 dan kecerunan linear melaksanakan imej latar belakang dalam latar belakang yang sepadan
Berikut ialah kod sumber css:
@keyframes hanya mencipta kesan animasi Jika kita mahu bar kemajuan benar-benar bergerak, kita perlu memanggil animasi "progress-bar-stripes" yang dibuat oleh @keyframes dengan cara tertentu dan mencetuskan animasi untuk berkuat kuasa. melalui sesuatu peristiwa. Dalam rangka kerja Bootstrap, tambahkan nama kelas "aktif" pada bekas bar kemajuan "progres" dan biarkan animasi "progress-bar-stripes" berkuat kuasa apabila dokumen dimuatkan
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
Contoh:
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
效果如下（由于是直接从网页上结果来的图，这里并看不到它的动态效果）：
层叠进度条：
层叠进度可以将不容状态的进度条放在一起，按水平方式排列
例子：
<div class="progress"> <div class="progress-bar progress-bar-success" style="width:20%"></div> <div class="progress-bar progress-bar-info" style="width:10%"></div> <div class="progress-bar progress-bar-warning" style="width:30%"></div> <div class="progress-bar progress-bar-danger" style="width:15%"></div> </div>
除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“progress”容器中添加对应的进度条，同样要注意，层叠的进度条之和不能大于100%。
下面来看一个例子：
<div class="progress"> <div class="progress-bar progress-bar-success" style="width:20%"></div> <div class="progress-bar progress-bar-info" style="width:20%"></div> <div class="progress-bar progress-bar-warning" style="width:30%"></div> <div class="progress-bar progress-bar-danger" style="width:15%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div> <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div> <div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div> <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width:20%"></div> <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div> <div class="progress-bar progress-bar-warning" style="width:30%"></div> <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div> </div>
关于Bootstrap进度条组件知识详解到此就介绍了，希望对大家有所帮助！
