ਤਰੱਕੀ

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

ਇਸ ਪੰਨੇ 'ਤੇ

ਕਿਦਾ ਚਲਦਾ

ਤਰੱਕੀ ਦੇ ਹਿੱਸੇ ਦੋ HTML ਤੱਤਾਂ, ਚੌੜਾਈ ਨੂੰ ਸੈੱਟ ਕਰਨ ਲਈ ਕੁਝ CSS, ਅਤੇ ਕੁਝ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਬਣਾਏ ਗਏ ਹਨ। ਅਸੀਂ HTML5 <progress>ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰਦੇ , ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹੋਏ ਕਿ ਤੁਸੀਂ ਪ੍ਰਗਤੀ ਬਾਰ ਸਟੈਕ ਕਰ ਸਕਦੇ ਹੋ, ਉਹਨਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਉਹਨਾਂ ਉੱਤੇ ਟੈਕਸਟ ਲੇਬਲ ਲਗਾ ਸਕਦੇ ਹੋ।

ਅਸੀਂ .progressਪ੍ਰਗਤੀ ਪੱਟੀ ਦੇ ਅਧਿਕਤਮ ਮੁੱਲ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਇੱਕ ਰੈਪਰ ਵਜੋਂ ਵਰਤਦੇ ਹਾਂ।
.progress-barਅਸੀਂ ਹੁਣ ਤੱਕ ਦੀ ਤਰੱਕੀ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਅੰਦਰੂਨੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ .
.progress-barਉਹਨਾਂ ਦੀ ਚੌੜਾਈ ਸੈਟ ਕਰਨ ਲਈ ਇੱਕ ਇਨਲਾਈਨ ਸ਼ੈਲੀ, ਉਪਯੋਗਤਾ ਕਲਾਸ, ਜਾਂ ਕਸਟਮ CSS ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
ਇਸ ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣ .progress-barਲਈ ਕੁਝ roleਅਤੇ ariaਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਇਹ ਸਭ ਇਕੱਠੇ ਰੱਖੋ, ਅਤੇ ਤੁਹਾਡੇ ਕੋਲ ਹੇਠ ਲਿਖੀਆਂ ਉਦਾਹਰਣਾਂ ਹਨ.

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

ਬੂਟਸਟਰੈਪ ਚੌੜਾਈ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਮੁੱਠੀ ਭਰ ਉਪਯੋਗਤਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ । ਤੁਹਾਡੀਆਂ ਲੋੜਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹੋਏ, ਇਹ ਪ੍ਰਗਤੀ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਕੌਂਫਿਗਰ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ।

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

ਲੇਬਲ

ਦੇ ਅੰਦਰ ਟੈਕਸਟ ਰੱਖ ਕੇ ਆਪਣੀਆਂ ਪ੍ਰਗਤੀ ਪੱਟੀਆਂ ਵਿੱਚ ਲੇਬਲ ਸ਼ਾਮਲ ਕਰੋ .progress-bar।

25%

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

ਉਚਾਈ

ਅਸੀਂ ਸਿਰਫ height'ਤੇ ਇੱਕ ਮੁੱਲ ਸੈਟ ਕਰਦੇ ਹਾਂ .progress, ਇਸ ਲਈ ਜੇਕਰ ਤੁਸੀਂ ਉਸ ਮੁੱਲ ਨੂੰ ਬਦਲਦੇ ਹੋ ਤਾਂ ਅੰਦਰਲਾ .progress-barਆਪਣੇ ਆਪ ਹੀ ਉਸ ਅਨੁਸਾਰ ਮੁੜ ਆਕਾਰ ਦੇਵੇਗਾ।

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" 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" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ਪਿਛੋਕੜ

ਵਿਅਕਤੀਗਤ ਤਰੱਕੀ ਬਾਰਾਂ ਦੀ ਦਿੱਖ ਨੂੰ ਬਦਲਣ ਲਈ ਬੈਕਗ੍ਰਾਉਂਡ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" 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" 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" 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" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ਕਈ ਬਾਰ

ਜੇਕਰ ਤੁਹਾਨੂੰ ਲੋੜ ਹੋਵੇ ਤਾਂ ਇੱਕ ਪ੍ਰਗਤੀ ਭਾਗ ਵਿੱਚ ਕਈ ਪ੍ਰਗਤੀ ਬਾਰਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ।

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

ਧਾਰੀਦਾਰ

ਪ੍ਰਗਤੀ ਪੱਟੀ ਦੇ ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ ਉੱਤੇ CSS ਗਰੇਡੀਐਂਟ ਦੁਆਰਾ ਇੱਕ ਸਟ੍ਰਿਪ ਲਾਗੂ ਕਰਨ .progress-bar-stripedਲਈ ਕਿਸੇ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।.progress-bar

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" 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" 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" 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" 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" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ਐਨੀਮੇਟਡ ਪੱਟੀਆਂ

ਸਟ੍ਰਿਪਡ ਗਰੇਡੀਐਂਟ ਨੂੰ ਵੀ ਐਨੀਮੇਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। CSS3 ਐਨੀਮੇਸ਼ਨਾਂ ਰਾਹੀਂ ਸੱਜੇ ਤੋਂ ਖੱਬੇ ਪੱਟੀਆਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ ਵਿੱਚ .progress-bar-animatedਸ਼ਾਮਲ ਕਰੋ ।.progress-bar

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

ਸੱਸ

ਵੇਰੀਏਬਲ

$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; }
  }
}