أشرطة تقدم W3.CSS
يمكن استخدام شريط التقدم لإظهار مدى تقدم المستخدم في العملية:
20٪
شريط التقدم الأساسي
يمكن استخدام عنصر <div> عادي لشريط تقدم.
يمكن استخدام خاصية عرض CSS لتعيين ارتفاع وعرض شريط التقدم.
مثال
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
عرض شريط التقدم
غيّر عرض شريط التقدم بخاصية عرض CSS (من 0 إلى 100٪):
مثال
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
ألوان شريط التقدم
استخدم فئات الألوان w3- لتغيير لون شريط التقدم:
مثال
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
تسميات شريط التقدم
أضف نصًا داخل عنصر حاوية w3 لإضافة تسمية إلى شريط التقدم.
استخدم فئة w3-center لتوسيط الملصق. إذا تم حذفه ، فسيتم تركه بمحاذاة.
25٪
50٪
75٪
مثال
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
حجم نص شريط التقدم
استخدم فئات w3- الحجم لتغيير حجم النص في الحاوية:
50٪
50٪
50٪
مثال
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
مساحة شريط التقدم
استخدم فئات w3-padding لإضافة حشوة إلى الحاوية.
25٪
25٪
25٪
مثال
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
أشرطة تقدم مستديرة
استخدم فئات w3-round لإضافة زوايا مستديرة إلى شريط التقدم:
25٪
25٪
25٪
مثال
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
شريط التقدم الديناميكي
استخدم JavaScript لإنشاء شريط تقدم ديناميكي:
مثال
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green"
style="height:24px;width:1%"></div>
</div>
<button class="w3-button w3-light-grey" 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>
شريط تقدم ديناميكي مع تسميات
تسمية مركزية:
مثال
20%
تسمية بمحاذاة إلى اليسار:
مثال
20%
تسمية خارج شريط التقدم:
مثال
20%
مثال آخر (متقدم):
مثال
Added 0 of 10 photos