پیش رفت

بوٹسٹریپ کسٹم پروگریس بارز استعمال کرنے کے لیے دستاویزات اور مثالیں جو اسٹیکڈ بارز، اینی میٹڈ بیک گراؤنڈز، اور ٹیکسٹ لیبلز کے لیے معاونت فراہم کرتی ہیں۔

اس صفحہ پر

یہ کیسے کام کرتا ہے

پیش رفت کے اجزاء دو HTML عناصر، چوڑائی سیٹ کرنے کے لیے کچھ CSS، اور چند صفات کے ساتھ بنائے گئے ہیں۔ ہم HTML5 <progress>عنصر کا استعمال نہیں کرتے ہیں ، اس بات کو یقینی بناتے ہوئے کہ آپ پروگریس بارز کو اسٹیک کر سکتے ہیں، انہیں متحرک کر سکتے ہیں، اور ان پر ٹیکسٹ لیبل لگا سکتے ہیں۔

ہم .progressپروگریس بار کی زیادہ سے زیادہ قدر کی نشاندہی کرنے کے لیے بطور ریپر استعمال کرتے ہیں۔
.progress-barہم اب تک کی پیشرفت کی نشاندہی کرنے کے لیے اندرونی استعمال کرتے ہیں ۔
.progress-barان کی چوڑائی سیٹ کرنے کے لیے ان لائن اسٹائل، یوٹیلیٹی کلاس، یا کسٹم CSS کی ضرورت ہوتی ہے ۔
.progress-barاسے قابل رسائی بنانے کے لیے کچھ roleاور ariaصفات کی بھی ضرورت ہوتی ہے، بشمول ایک قابل رسائی نام (استعمال کرتے ہوئے ، aria-labelیا aria-labelledbyاس سے ملتا جلتا)۔

یہ سب ایک ساتھ رکھیں، اور آپ کے پاس درج ذیل مثالیں ہیں۔

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

بوٹسٹریپ چوڑائی کی ترتیب کے لیے مٹھی بھر افادیت فراہم کرتا ہے ۔ آپ کی ضروریات پر منحصر ہے، یہ تیزی سے پیشرفت کو ترتیب دینے میں مدد کر سکتے ہیں۔

html

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

لیبلز

کے اندر متن رکھ کر اپنے پروگریس بارز میں لیبلز شامل کریں .progress-bar۔

25%

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Example with label" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

اونچائی

ہم نے صرف heightپر ایک قدر مقرر کی ہے .progress، لہذا اگر آپ اس قدر کو تبدیل کرتے ہیں تو اندرونی .progress-barخود بخود اس کے مطابق سائز تبدیل کر دے گا۔

html

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 1px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 20px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

پس منظر

انفرادی پروگریس بارز کی ظاہری شکل کو تبدیل کرنے کے لیے بیک گراؤنڈ یوٹیلیٹی کلاسز کا استعمال کریں۔

html

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" aria-label="Info example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" aria-label="Warning example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

معاون ٹکنالوجی کے معنی پہنچانا

معنی کو شامل کرنے کے لیے رنگ کا استعمال صرف ایک بصری اشارہ فراہم کرتا ہے، جو کہ معاون ٹیکنالوجیز - جیسے کہ اسکرین ریڈرز کے صارفین تک نہیں پہنچایا جائے گا۔ اس بات کو یقینی بنائیں کہ رنگ سے ظاہر کی گئی معلومات یا تو خود مواد سے واضح ہے (مثلاً مرئی متن)، یا متبادل ذرائع سے شامل کی گئی ہے، جیسے کہ .visually-hiddenکلاس کے ساتھ چھپا ہوا اضافی متن۔

متعدد بار

اگر آپ کو ضرورت ہو تو پروگریس جزو میں متعدد پروگریس بارز شامل کریں۔

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

دھاری دار

پروگریس بار کے پس منظر کے رنگ پر CSS گریڈینٹ کے ذریعے پٹی لگانے کے لیے .progress-bar-stripedکسی میں بھی شامل کریں ۔.progress-bar

html

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-label="Success striped example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-label="Info striped example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-label="Warning striped example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-label="Danger striped example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

متحرک دھاریاں

دھاری دار میلان کو بھی متحرک کیا جا سکتا ہے۔ CSS3 اینیمیشنز کے ذریعے دائیں سے بائیں پٹیوں کو متحرک کرنے کے لیے میں .progress-bar-animatedشامل کریں ۔.progress-bar

html

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

سی ایس ایس

متغیرات

v5.2.0 میں شامل کیا گیا۔

بوٹسٹریپ کے ابھرتے ہوئے CSS متغیرات کے نقطہ نظر کے حصے کے طور پر، پروگریس بارز اب مقامی CSS متغیرات .progressکو بہتر ریئل ٹائم حسب ضرورت کے لیے استعمال کرتی ہیں۔ CSS متغیرات کی قدریں Sass کے ذریعے سیٹ کی جاتی ہیں، اس لیے Sass حسب ضرورت اب بھی تعاون یافتہ ہے۔

  --#{$prefix}progress-height: #{$progress-height};
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
  --#{$prefix}progress-bg: #{$progress-bg};
  --#{$prefix}progress-border-radius: #{$progress-border-radius};
  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
  --#{$prefix}progress-bar-color: #{$progress-bar-color};
  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};

Sass متغیرات

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

کی فریمز

کے لیے CSS متحرک تصاویر بنانے کے لیے استعمال کیا جاتا ہے .progress-bar-animated۔ میں شامل ہے scss/_progress-bar.scss۔

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}