ਸਪਿਨਰ

ਬੂਟਸਟਰੈਪ ਸਪਿਨਰਾਂ ਦੇ ਨਾਲ ਕਿਸੇ ਕੰਪੋਨੈਂਟ ਜਾਂ ਪੰਨੇ ਦੀ ਲੋਡਿੰਗ ਸਥਿਤੀ ਨੂੰ ਦਰਸਾਓ, ਪੂਰੀ ਤਰ੍ਹਾਂ HTML, CSS, ਅਤੇ ਬਿਨਾਂ JavaScript ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਬਾਰੇ

ਬੂਟਸਟਰੈਪ "ਸਪਿਨਰਾਂ" ਨੂੰ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਲੋਡਿੰਗ ਸਥਿਤੀ ਦਿਖਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਉਹ ਸਿਰਫ਼ HTML ਅਤੇ CSS ਨਾਲ ਬਣਾਏ ਗਏ ਹਨ, ਮਤਲਬ ਕਿ ਉਹਨਾਂ ਨੂੰ ਬਣਾਉਣ ਲਈ ਤੁਹਾਨੂੰ ਕਿਸੇ JavaScript ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਹਾਲਾਂਕਿ, ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਦੀ ਦਿੱਖ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਕੁਝ ਕਸਟਮ JavaScript ਦੀ ਲੋੜ ਪਵੇਗੀ। ਉਹਨਾਂ ਦੀ ਦਿੱਖ, ਅਲਾਈਨਮੈਂਟ ਅਤੇ ਆਕਾਰ ਨੂੰ ਸਾਡੀਆਂ ਸ਼ਾਨਦਾਰ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਪਹੁੰਚਯੋਗਤਾ ਦੇ ਉਦੇਸ਼ਾਂ ਲਈ, ਇੱਥੇ ਹਰੇਕ ਲੋਡਰ ਵਿੱਚ ਸ਼ਾਮਲ ਹੈ role="status"ਅਤੇ ਇੱਕ ਨੇਸਟਡ <span class="visually-hidden">Loading...</span>।

ਇਸ ਕੰਪੋਨੈਂਟ ਦਾ ਐਨੀਮੇਸ਼ਨ ਪ੍ਰਭਾਵ prefers-reduced-motionਮੀਡੀਆ ਪੁੱਛਗਿੱਛ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਸਾਡੇ ਪਹੁੰਚਯੋਗਤਾ ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਘਟਾਏ ਗਏ ਮੋਸ਼ਨ ਭਾਗ ਨੂੰ ਦੇਖੋ ।

ਬਾਰਡਰ ਸਪਿਨਰ

ਹਲਕੇ ਭਾਰ ਵਾਲੇ ਲੋਡਿੰਗ ਸੂਚਕ ਲਈ ਬਾਰਡਰ ਸਪਿਨਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

html

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ਰੰਗ

ਬਾਰਡਰ ਸਪਿਨਰ currentColorਇਸਦੇ ਲਈ ਵਰਤਦਾ ਹੈ, ਮਤਲਬ ਕਿ ਤੁਸੀਂ ਟੈਕਸਟ ਰੰਗ ਉਪਯੋਗਤਾਵਾਂborder-color ਨਾਲ ਰੰਗ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ । ਤੁਸੀਂ ਸਟੈਂਡਰਡ ਸਪਿਨਰ 'ਤੇ ਸਾਡੀ ਕਿਸੇ ਵੀ ਟੈਕਸਟ ਕਲਰ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।

html

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

border-colorਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਨਹੀਂ ਕਰਦੇ ? ਹਰੇਕ ਬਾਰਡਰ ਸਪਿਨਰ transparentਘੱਟੋ-ਘੱਟ ਇੱਕ ਪਾਸੇ ਲਈ ਇੱਕ ਬਾਰਡਰ ਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ, ਇਸਲਈ .border-{color}ਉਪਯੋਗਤਾਵਾਂ ਉਸ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰ ਦੇਣਗੀਆਂ।

ਵਧ ਰਿਹਾ ਸਪਿਨਰ

ਜੇਕਰ ਤੁਸੀਂ ਬਾਰਡਰ ਸਪਿਨਰ ਨੂੰ ਪਸੰਦ ਨਹੀਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਗ੍ਰੋ ਸਪਿਨਰ 'ਤੇ ਜਾਓ। ਹਾਲਾਂਕਿ ਇਹ ਤਕਨੀਕੀ ਤੌਰ 'ਤੇ ਸਪਿਨ ਨਹੀਂ ਕਰਦਾ, ਇਹ ਵਾਰ-ਵਾਰ ਵਧਦਾ ਹੈ!

html

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ਇੱਕ ਵਾਰ ਫਿਰ, ਇਹ ਸਪਿਨਰ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ , ਤਾਂ ਜੋ ਤੁਸੀਂ ਟੈਕਸਟ ਰੰਗ ਉਪਯੋਗਤਾਵਾਂcurrentColor ਨਾਲ ਇਸਦੀ ਦਿੱਖ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਬਦਲ ਸਕਦੇ ਹੋ । ਇੱਥੇ ਇਹ ਸਮਰਥਿਤ ਵੇਰੀਐਂਟਸ ਦੇ ਨਾਲ ਨੀਲੇ ਰੰਗ ਵਿੱਚ ਹੈ।

html

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ਅਲਾਈਨਮੈਂਟ

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਸਪਿਨਰ rems, currentColor, ਅਤੇ ਨਾਲ ਬਣਾਏ ਗਏ ਹਨ display: inline-flex। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਉਹਨਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਮੁੜ ਆਕਾਰ ਦਿੱਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਮੁੜ ਰੰਗ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਅਤੇ ਤੇਜ਼ੀ ਨਾਲ ਇਕਸਾਰ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਹਾਸ਼ੀਏ

ਆਸਾਨ ਸਪੇਸਿੰਗ ਲਈ ਮਾਰਜਿਨ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ।.m-5

html

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ਪਲੇਸਮੈਂਟ

ਫਲੈਕਸਬਾਕਸ ਉਪਯੋਗਤਾਵਾਂ , ਫਲੋਟ ਉਪਯੋਗਤਾਵਾਂ , ਜਾਂ ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਤਾਂ ਜੋ ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ ਸਥਿਤੀ ਵਿੱਚ ਸਪਿਨਰਾਂ ਦੀ ਲੋੜ ਹੋਵੇ।

ਫਲੈਕਸ

html

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

ਲੋਡ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ...

html

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

ਤੈਰਦਾ ਹੈ

html

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

ਟੈਕਸਟ ਇਕਸਾਰ ਕਰੋ

html

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

ਆਕਾਰ

ਜੋੜੋ .spinner-border-smਅਤੇ .spinner-grow-smਇੱਕ ਛੋਟਾ ਸਪਿਨਰ ਬਣਾਉਣ ਲਈ ਜੋ ਤੇਜ਼ੀ ਨਾਲ ਦੂਜੇ ਹਿੱਸਿਆਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।

html

<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ਜਾਂ, ਲੋੜ ਅਨੁਸਾਰ ਮਾਪ ਬਦਲਣ ਲਈ ਕਸਟਮ CSS ਜਾਂ ਇਨਲਾਈਨ ਸਟਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰੋ।

html

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ਬਟਨ

ਇਹ ਦਰਸਾਉਣ ਲਈ ਕਿ ਕੋਈ ਕਾਰਵਾਈ ਵਰਤਮਾਨ ਵਿੱਚ ਪ੍ਰਕਿਰਿਆ ਹੋ ਰਹੀ ਹੈ ਜਾਂ ਹੋ ਰਹੀ ਹੈ, ਬਟਨਾਂ ਦੇ ਅੰਦਰ ਸਪਿਨਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਤੁਸੀਂ ਟੈਕਸਟ ਨੂੰ ਸਪਿਨਰ ਤੱਤ ਤੋਂ ਬਾਹਰ ਵੀ ਬਦਲ ਸਕਦੇ ਹੋ ਅਤੇ ਲੋੜ ਅਨੁਸਾਰ ਬਟਨ ਟੈਕਸਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।

html

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

html

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

CSS

ਵੇਰੀਏਬਲ

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

ਬੂਟਸਟਰੈਪ ਦੀ ਵਿਕਸਤ ਹੋ ਰਹੀ CSS ਵੇਰੀਏਬਲ ਪਹੁੰਚ ਦੇ ਹਿੱਸੇ ਵਜੋਂ, ਸਪਿਨਰ ਹੁਣ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ .spinner-borderਅਤੇ .spinner-growਵਧੇ ਹੋਏ ਰੀਅਲ-ਟਾਈਮ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਲਈ। CSS ਵੇਰੀਏਬਲ ਲਈ ਮੁੱਲ Sass ਦੁਆਰਾ ਸੈੱਟ ਕੀਤੇ ਗਏ ਹਨ, ਇਸਲਈ Sass ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਅਜੇ ਵੀ ਸਮਰਥਿਤ ਹੈ।

ਬਾਰਡਰ ਸਪਿਨਰ ਵੇਰੀਏਬਲ:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

ਵਧ ਰਹੇ ਸਪਿਨਰ ਵੇਰੀਏਬਲ:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

ਦੋਨਾਂ ਸਪਿਨਰਾਂ ਲਈ, ਲੋੜ ਅਨੁਸਾਰ ਇਹਨਾਂ CSS ਵੇਰੀਏਬਲਾਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰਨ ਲਈ ਛੋਟੇ ਸਪਿਨਰ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਉਦਾਹਰਨ ਲਈ, .spinner-border-smਕਲਾਸ ਹੇਠ ਲਿਖੇ ਕੰਮ ਕਰਦੀ ਹੈ:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Sass ਵੇਰੀਏਬਲ

$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

ਕੀਫ੍ਰੇਮ

ਸਾਡੇ ਸਪਿਨਰਾਂ ਲਈ CSS ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਵਿੱਚ ਸ਼ਾਮਿਲ ਹੈ scss/_spinners.scss।

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}