شرح مفصل لمعرفة شريط التقدم

في صفحات الويب ، غالبًا ما ينظر إلى تأثيرات شريط التقدم ، مثل تشطر النظام ، وحالة التحميل ، وما إلى ذلك. يستخدم مكون شريط التقدم سمات الانتقال والرسوم المتحركة لـ CSS3 لإكمال بعض المؤثرات الخاصة. لا يتم دعم هذه المؤثرات الخاصة في IE9 وأسفل إصدارات IE9 و Firefox ، ولا تدعم Opera 12 سمات الرسوم المتحركة.

يشبه شريط التقدم المكونات المستقلة الأخرى ، يمكن للمطورين اختيار الإصدار المقابل وفقًا لاحتياجاتهم:

أقل: تقدم بار. بلا

ساس: _progress-bars.scss

شريط التقدم الأساسي

مبدأ التنفيذ:

مطلوب حاويتين. تستخدم الحاوية الخارجية اسم الفئة. حيث يتم استخدام .progress لتعيين لون خلفية حاوية شريط التقدم ، والارتفاع ، والتباعد ، وما إلى ذلك ؛ و .progress-bar يحدد اتجاه التقدم ، ولون الخلفية والتأثير المفرط لشريط التقدم ؛ فيما يلي رمز مصدر CSS:

 Progress {الارتفاع: 20px ؛ الهامش-القاع: 20px ؛ تجاوز: مخفي ؛ خلفية اللون: #f5f5f5 ؛ الحدود radius: 4px ؛ -webkit-box-shadow: inset 0 1px 2px rgba (0 ، 0 ، 0 ، .1) ؛ box-shadow: {float: left ؛ width: 0 ؛ height: 100 ٪ ؛ font-size: 12px ؛ line-height: 20px ؛ color: #ffff ؛ text-align: center ؛ center ؛ background-color: #428bca ؛ -webkit-box-shadow: inset 0 -1px 0 rgba (0 ، 0 ، .15) ؛ 0 ، .15) ؛-WebKit-Ransition: Width .6s Ease ؛ Transition: Width .6S Ease ؛}

مثال:

 <viv> <div rob = "progressbar" aria-valuenow = "30" aria-valuemin = "0" aria-valuemax = "100"> <span> 30 ٪ </file> </viv> </viv>

وظيفة سمة الدور: تخبر محركات البحث بأن وظيفة هذا DIV هي شريط التقدم ؛

ARIA-VALUENOW = "30" وظيفة السمة: تقدم شريط التقدم الحالي 40 ٪ ؛

ARIA-VALUEMIN = "0" وظيفة السمة: الحد الأدنى لقيمة شريط التقدم هو 0 ٪ ؛

ARIA-VALUEMAX = "100" وظيفة السمة: الحد الأقصى لقيمة شريط التقدم هي 100 ٪ ؛

يمكنك إزالة علامة <span> مع مجموعة الفئة .SR فقط من مكون شريط التقدم للسماح للتقدم الحالي ؛

 <viv> <div rol = "progressbar" aria-valuenow = "40" aria-valuemin = "0" aria-valuemax = "100"> 40 ٪ </viv> </viv>

شريط التقدم الملون

شريط التقدم الملون هو نفس شريط التقدم تحذير. من أجل منح المستخدمين تجربة أفضل ، يتم أيضًا تكوين ألوان شريط التقدم المختلفة وفقًا لحالات مختلفة ، بما في ذلك الأنواع الأربعة التالية:

التقدم-بروفيو: يمثل شريط التقدم في المعلومات ، الأزرق

النجاح الناجح: يشير إلى شريط التقدم الناجح ، الأخضر

حوكمة التقدم: يشير إلى شريط التقدم التحذيري ، الأصفر

تقدم التقدم: يشير إلى شريط التقدم الأخطاء ، الأحمر

رمز المصدر CSS:

 .progress-bar-success {background-color: #5cb85c ؛}. progress-bar-info {background-color: #5bc0de ؛}.

كيفية استخدام:

فقط أضف اسم الفئة المقابلة إلى شريط التقدم الأساسي

مثال:

 <h1> شريط التقدم الملون </h1> <viv> <div rol = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 25 ٪ </div> </viv> <div> <div aro = "progressbar" aria-valuemax = "40" aria-valuemax = "0"> 40 ٪ </div> </viv> <viv> <div rol = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80 ٪ </viv> <viv> <div = aria-valuemin = "0"> 60 ٪ </div> </viv>

الآثار هي كما يلي:

شريط التقدم المخطط

يستخدم شريط التقدم المخطط التدرج الخطي لـ CSS3. لا يستخدم أي صور. يتطلب استخدام شريط التقدم المخطط فقط إضافة اسم الفصل "Progress-Striped" إلى حاوية شريط التقدم. تقدم. إذا كنت ترغب في إحداث شريط تقدم مثل تقدم اللون ولديك تأثير لون ، فأنت بحاجة فقط إلى إضافة اسم فئة الألوان المقابلة إلى شريط التقدم.

ما يلي هو رمز مصدر النمط.

 . 75 ٪ ، شفافة 75 ٪ ، شفافة) ؛ صورة الخلفية: تصوير خطي (45DEG ، RGBA (255 ، 255 ، 255 ، .15) 25 ٪ ، شفاف 25 ٪ ، شفاف 25 ٪ ، شفاف 50 ٪ ، RGBA (255 ، 255 ، .15) 50 ٪ ، RGBA (255 ، 255 ، 255 ، 75 ٪ ، شفاف) ؛ حجم الخلفية: 40 بكسل 40 بكسل ؛}

كل ولاية تتوافق مع تقدم الخط

 . شفافة 75 ٪ ، شفافة 75 ٪ ، شفافة) ؛ صورة الخلفية: التصوير الخطي (45DEG ، RGBA (255 ، 255 ، 255 ، .15) 25 ٪ ، شفاف 25 ٪ ، 255 ، 255 ، .15) 50 ٪ ، RGBA (255 ، 255 ، 255 ، .15) 50 ٪ ، RGBA (255 ، 255 ، 255 ، .15) 75 ٪ ، شفاف 75 ٪ ، شفاف) RGBA (255 ، 255 ، .15) 50 ٪ ، RGBA (255 ، 255 ، 255 ، .15) 75 ٪ ، شفاف 75 ٪ ، شفاف) ؛}. 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. .15) 75 ٪ ، 75 ٪ شفافة). RGBA (255 ، 255 ، 255 ، .15) 75 ٪ ، 75 ٪ شفافة ، شفافة) ؛}. .15) 50 ٪ ، RGBA (255 ، 255 ، .15) 75 ٪ ، شفاف 75 ٪ ، شفاف) 255 ، 255 ، 255 ، 255 ، 255 ، 255 ، 255 ، .15) 25 ٪ ، شفاف 25 ٪ ، شفاف 50 ٪ ، RGBA (255 ، 255 ، 255 ، .15) 50 ٪ ، RGBA (255 ، 255 ، 255 ، .15)

دعونا نلقي نظرة على استخدام أشرطة التقدم المخطط:

 <h1> شريط التقدم المخطط </h1> <viv> <div rol = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 25 ٪ </viv> </viv> <div> div rol = "progressbar" aria-valuemax = "40" aria-valuemax = "0"> 40 ٪ </div> </viv> <viv> <div rol = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80 ٪ </viv> <viv> <div = aria-valuemin = "0"> 60 ٪ </div> </viv>

شريط التقدم الشريط الديناميكي

يمكن تحقيق شريط التقدم في الشريط الديناميكي بناءً على شريط التقدم.

يتم إنجاز مبدأ التنفيذ بشكل أساسي من خلال الرسوم المتحركة لـ CSS3. أولاً ، يتم إنشاء الرسوم المتحركة للتقدم BAR-BAR من خلال keyframes. تقوم هذه الرسوم المتحركة بشكل أساسي بعمل شيء واحد ، وهو تغيير موضع صورة الخلفية ، أي قيمة موقع الخلفية. نظرًا لأن شريط التقدم المخطط مصنوع من خلال التدرج الخطي لـ CSS3 ، وينفذ تصوير الخطي صورة الخلفية المقابلة للخلفية

هنا هو رمز مصدر CSS:

 @-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 ؛}}

keyframes فقط يخلق تأثير الرسوم المتحركة. إذا كنا نريد أن يتحرك شريط التقدم حقًا ، فنحن بحاجة إلى استدعاء الرسوم المتحركة "Bar-Bar-stripes" التي أنشأتها @keyframes بطريقة معينة ، ونفعى الرسوم المتحركة ليصبح ساري المفعول من خلال حدث ما. في إطار bootstrap ، أضف اسمًا "نشطًا" إلى حاوية شريط التقدم "التقدم" واترك تحميل المستندات مكتملًا ولمس الرسوم المتحركة "التقدم BAR-BAR-stripes" ليصبح مفعولًا

رمز النمط المقابل للرسوم المتحركة للمكالمات كما يلي:

 .progress.active .progress-bar {-webkit-animation: progress-bar-stripes 2s linear linear ؛ الرسوم المتحركة: stripes progress-bar 2s خطي ؛}}

مثال:

 <H1> شريط التقدم الديناميكي للشروط </h1> <viv> <div rol = "progressBar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 25 ٪ </viv> </viv> <div> <div rom = "progressbar" aria-valuemax = "40" ARIA-VALUEM aria-valuemax = "0"> 40 ٪ </div> </viv> <viv> <div rol = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80 ٪ </viv> <viv> <div = aria-valuemin = "0"> 60 ٪ </div> </viv>

التأثير على النحو التالي (نظرًا لأنها صورة تأتي مباشرة من النتيجة على صفحة الويب ، لا يمكنها رؤية تأثيرها الديناميكي هنا):

شريط التقدم المتتالي:

يمكن أن يؤدي تقدم التراص إلى وضع أشرطة التقدم غير المتوافقة معًا وترتيبها أفقياً.

مثال:

 <viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv>

بالإضافة إلى تكديس أشرطة التقدم للألوان ، يمكنك أيضًا تكديس أشرطة التقدم المخطط ، أو مزج قضبان التقدم المخطط مع أشرطة التقدم الملونة. تحتاج فقط إلى إضافة أشرطة التقدم المقابلة إلى حاوية "التقدم". لاحظ أيضًا أن مجموع أشرطة التقدم المكدسة لا يمكن أن يكون أكبر من 100 ٪.

دعونا نلقي نظرة على مثال:

 <viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> </viv> </viv> <viv> <viv> <viv> <viv> <viv> </viv>

هذا هو شرح مفصل لمعرفة شريط التقدم في Bootstrap. آمل أن يكون ذلك مفيدًا للجميع!