أشرطة التقدم
شريط تقدم يمكن أن تستخدم لإظهار مدى طول المستخدم في عملية:
الأساسية شريط التقدم
وتعرف الطبقة W3-التقدم حاوية حاوية لشريط التقدم، وW3-progressbar يعرف شريط التقدم الفعلي (من "شغل" المنطقة). تعيين عرض شريط التقدم مع خاصية عرض CSS:
مثال
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:10%"></div>
</div>تقدم مقاسات بار
تعيين عرض / حجم شريط التقدم مع قيمة النسبة المئوية من 0 إلى 100٪:
مثال
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:50%"></div>
</div>التقدم بار الألوان
افتراضيا، لون W3-التقدم حاوية هو رمادي فاتح وW3-progressbar هو الرمادي:
تغيير لونها مع أي من الفئات W3.CSS اللون:
مثال
<div class="w3-progress-container
w3-light-blue">
<div class="w3-progressbar
w3-blue" style="width:75%"></div>
</div>تقريب أشرطة التقدم
استخدام أي من الفئات W3-الجولة لإضافة زوايا مدورة لأشرطة التقدم الخاص بك:
مثال
<div class="w3-progress-container w3-round">
<div
class="w3-progressbar w3-round" style="width:25%"></div>
</div>تسميات شريط التقدم
إضافة عنصر جديد داخل "W3-progressbar" لإضافة تسمية إلى شريط التقدم.
نصيحة: استخدم فئة مركز W3 أن تبقي دائما التسمية تركزت. إذا تم حذفها، فإنه سيتم محاذاة اليسار.
مثال
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:25%">
<div class="w3-center w3-text-white">25%</div>
</div>
</div>دينامية التقدم شريط
استخدام جافا سكريبت لإنشاء شريط التقدم الديناميكي:
مثال
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:1%"></div>
</div>
<button class="w3-btn" onclick="move()">Click Me</button>
<script>
function move() {
var elem =
document.getElementById("myBar");
var width =
1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>دينامية التقدم شريط مع تسميات
التسمية تتركز:
غادر الانحياز التسمية:
تسمية خارج شريط التقدم: