ਤਰੱਕੀ

ਸਟੈਕਡ ਬਾਰਾਂ, ਐਨੀਮੇਟਡ ਬੈਕਗ੍ਰਾਊਂਡਾਂ, ਅਤੇ ਟੈਕਸਟ ਲੇਬਲਾਂ ਲਈ ਸਮਰਥਨ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਬੂਟਸਟਰੈਪ ਕਸਟਮ ਪ੍ਰਗਤੀ ਬਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਕਿਦਾ ਚਲਦਾ

ਤਰੱਕੀ ਦੇ ਹਿੱਸੇ ਦੋ 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>

CSS

ਵੇਰੀਏਬਲ

v5.2.0 ਵਿੱਚ ਸ਼ਾਮ�� ਕੀਤਾ ਗਿਆ

ਬੂਟਸਟਰੈਪ ਦੀ ਵਿਕਸਿਤ ਹੋ ਰਹੀ CSS ਵੇਰੀਏਬਲ ਪਹੁੰਚ ਦੇ ਹਿੱਸੇ ਵਜੋਂ, ਪ੍ਰਗਤੀ ਬਾਰ ਹੁਣ .progressਵਿਸਤ੍ਰਿਤ ਰੀਅਲ-ਟਾਈਮ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਲਈ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਹਨ। 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; }
  }
}