in English

ସ୍ପିନର୍ସ |

ବୁଟଷ୍ଟ୍ରାପ୍ ସ୍ପିନର୍ ସହିତ ଏକ ଉପାଦାନ କିମ୍ବା ପୃଷ୍ଠାର ଲୋଡିଂ ସ୍ଥିତିକୁ ସୂଚାନ୍ତୁ, ସମ୍ପୁର୍ଣ୍ଣ ଭାବରେ HTML, CSS ସହିତ ନିର୍ମିତ, ଏବଂ କ Java ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟ ନାହିଁ |

ଏହି ପୃଷ୍ଠାରେ |

ବିଷୟରେ

ତୁମର ପ୍ରୋଜେକ୍ଟରେ ଲୋଡିଂ ସ୍ଥିତି ଦେଖାଇବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ “ସ୍ପିନର୍ସ” ବ୍ୟବହାର କରାଯାଇପାରିବ | ସେଗୁଡ଼ିକ କେବଳ HTML ଏବଂ CSS ସହିତ ନିର୍ମିତ, ଅର୍ଥାତ୍ ସେଗୁଡିକ ସୃଷ୍ଟି କରିବା ପାଇଁ ଆପଣଙ୍କୁ କ Java ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟର ଆବଶ୍ୟକତା ନାହିଁ | ସେମାନଙ୍କର ଭିଜିବିଲିଟି ଟୋଗଲ୍ କରିବାକୁ ଆପଣ, ତଥାପି, କିଛି କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ କରିବେ | ଆମର ଚମତ୍କାର ଉପଯୋଗୀ ଶ୍ରେଣୀଗୁଡ଼ିକ ସହିତ ସେମାନଙ୍କର ରୂପ, ଆଲାଇନ୍ମେଣ୍ଟ୍ ଏବଂ ସାଇଜ୍ ସହଜରେ କଷ୍ଟମାଇଜ୍ ହୋଇପାରିବ |

ଆକ୍ସେସିବିଲିଟି ଉଦ୍ଦେଶ୍ୟ ପାଇଁ, ଏଠାରେ ପ୍ରତ୍ୟେକ ଲୋଡର୍ ଅନ୍ତର୍ଭୁକ୍ତ 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, ଅର୍ଥାତ୍ ଆପଣ ଟେକ୍ସଟ୍ ରଙ୍ଗ ଉପଯୋଗିତା ସହିତ ରଙ୍ଗ କଷ୍ଟୋମାଇଜ୍ କରିପାରିବେ | ଷ୍ଟାଣ୍ଡାର୍ଡ ସ୍ପିନରରେ ଆପଣ ଆମର ଯେକ text ଣସି ଟେକ୍ସଟ୍ ରଙ୍ଗ ଉପଯୋଗିତା ବ୍ୟବହାର କରିପାରିବେ |

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}ଉପଯୋଗିତା ଏହାକୁ ଅତିକ୍ରମ କରିବ |

ବ sp ୁଥିବା ସ୍ପିନର |

ଯଦି ଆପଣ ଏକ ସୀମା ସ୍ପିନର କଳ୍ପନା କରନ୍ତି ନାହିଁ, ବ grow ଼ୁଥିବା ସ୍ପିନରକୁ ଯାଆନ୍ତୁ | ଯଦିଓ ଏହା ଟେକ୍ନିକାଲ୍ ସ୍ପିନ୍ ନୁହେଁ, ଏହା ବାରମ୍ବାର ବ grow େ!

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 କିମ୍ବା ଇନଲାଇନ ଶ yles ଳୀ ବ୍ୟବହାର କରନ୍ତୁ |

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 ଭେରିଏବଲ୍ ପାଇଁ ମୂଲ୍ୟଗୁଡ଼ିକ ସାସ୍ ମାଧ୍ୟମରେ ସେଟ୍ ହୋଇଛି, ତେଣୁ ସାସ୍ କଷ୍ଟୋମାଇଜେସନ୍ ମଧ୍ୟ ସମର୍ଥିତ |

ସୀମା ସ୍ପିନର ଭେରିଏବଲ୍:

  --#{$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;

ବ sp ୁଥିବା ସ୍ପିନର ଭେରିଏବଲ୍:

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

ସାସ୍ ଭେରିଏବଲ୍ |

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