in English

ସ୍ପିନର୍ସ |

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

ବିଷୟରେ

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

ଆକ୍ସେସିବିଲିଟି ଉଦ୍ଦେଶ୍ୟ ପାଇଁ, ଏଠାରେ ପ୍ରତ୍ୟେକ ଲୋଡର୍ ଅନ୍ତର୍ଭୁକ୍ତ role="status"ଏବଂ ଏକ ନେଷ୍ଟେଡ୍ <span class="sr-only">Loading...</span>|

ଏହି ଉପାଦାନର ଆନିମେସନ୍ ପ୍ରଭାବ prefers-reduced-motionମିଡିଆ ଜିଜ୍ଞାସା ଉପରେ ନିର୍ଭରଶୀଳ | ଆମର ଆକ୍ସେସିବିଲିଟି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର ହ୍ରାସ ହୋଇଥିବା ଗତି ବିଭାଗ ଦେଖନ୍ତୁ |

ସୀମା ସ୍ପିନର |

ହାଲୁକା ଲୋଡିଂ ସୂଚକ ପାଇଁ ସୀମା ସ୍ପିନର ବ୍ୟବହାର କରନ୍ତୁ |

ଲୋଡିଂ ...
<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

ରଙ୍ଗଗୁଡିକ |

ସୀମା ସ୍ପିନର currentColorଏହାର ବ୍ୟବହାର କରେ border-color, ଅର୍ଥାତ୍ ଆପଣ ଟେକ୍ସଟ୍ ରଙ୍ଗ ଉପଯୋଗିତା ସହିତ ରଙ୍ଗ କଷ୍ଟୋମାଇଜ୍ କରିପାରିବେ | ଷ୍ଟାଣ୍ଡାର୍ଡ ସ୍ପିନରରେ ଆପଣ ଆମର ଯେକ text ଣସି ଟେକ୍ସଟ୍ ରଙ୍ଗ ଉପଯୋଗିତା ବ୍ୟବହାର କରିପାରିବେ |

ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>
border-colorଉପଯୋଗିତା କାହିଁକି ବ୍ୟବହାର କରୁନାହାଁନ୍ତି ? ପ୍ରତ୍ୟେକ ସୀମା ସ୍ପିନର transparentଅତିକମରେ ଗୋଟିଏ ପାର୍ଶ୍ୱ ପାଇଁ ଏକ ସୀମା ନିର୍ଦ୍ଦିଷ୍ଟ କରେ, ତେଣୁ .border-{color}ଉପଯୋଗିତା ଏହାକୁ ଅତିକ୍ରମ କରିବ |

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

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

ଲୋଡିଂ ...
<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

ପୁନର୍ବାର, ଏହି ସ୍ପିନର୍ ସହିତ ନିର୍ମିତ ହୋଇଛି , ତେଣୁ ଆପଣ ପାଠ୍ୟ ରଙ୍ଗ ଉପଯୋଗୀତାcurrentColor ସହିତ ସହଜରେ ଏହାର ରୂପ ପରିବର୍ତ୍ତନ କରିପାରିବେ | ସମର୍ଥିତ ପ୍ରକାରଗୁଡିକ ସହିତ ଏଠାରେ ଏହା ନୀଳ ରଙ୍ଗର |

ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>

ଶ୍ରେଣୀବଦ୍ଧତା |

ବୁଟଷ୍ଟ୍ରାପରେ ସ୍ପିନର୍ ଗୁଡିକ rems, currentColorଏବଂ ସହିତ ନିର୍ମିତ display: inline-flex| ଏହାର ଅର୍ଥ ସେଗୁଡିକ ସହଜରେ ଆକାର ପରିବର୍ତ୍ତନ, ରଙ୍ଗ ଏବଂ ଶୀଘ୍ର ଆଲାଇନ୍ ହୋଇପାରିବ |

ମାର୍ଜିନ୍

ସହଜ ବ୍ୟବଧାନ ପାଇଁ ମାର୍ଜିନ୍ ଉପଯୋଗିତା ବ୍ୟବହାର କରନ୍ତୁ |.m-5

ଲୋଡିଂ ...
<div class="spinner-border m-5" role="status">
  <span class="sr-only">Loading...</span>
</div>

ସ୍ଥାନ

ସ୍ପିନରମାନଙ୍କୁ ଠିକ୍ ସ୍ଥାନରେ ରଖିବା ପାଇଁ ଫ୍ଲେକ୍ସବକ୍ସ ଉପଯୋଗିତା , ଫ୍ଲୋଟ୍ ଉପଯୋଗିତା , କିମ୍ବା ଟେକ୍ସଟ୍ ଆଲାଇନମେଣ୍ଟ୍ ଉପଯୋଗିତା ବ୍ୟବହାର କରନ୍ତୁ |

ଫ୍ଲେକ୍ସ

ଲୋଡିଂ ...
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
ଲୋଡିଂ ...
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

ଭାସମାନ |

ଲୋଡିଂ ...
<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

ପାଠ୍ୟ ଆଲାଇନ୍ |

ଲୋଡିଂ ...
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

ଆକାର |

ଏକ ଛୋଟ ସ୍ପିନର୍ ଯୋଡନ୍ତୁ .spinner-border-smଏବଂ .spinner-grow-smତିଆରି କରନ୍ତୁ ଯାହା ଶୀଘ୍ର ଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକ ମଧ୍ୟରେ ବ୍ୟବହୃତ ହୋଇପାରିବ |

ଲୋଡିଂ ...
ଲୋଡିଂ ...
<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

କିମ୍ବା, ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ପରିମାପ ପରିବର୍ତ୍ତନ କରିବାକୁ କଷ୍ଟମ୍ CSS କିମ୍ବା ଇନଲାଇନ ଶ yles ଳୀ ବ୍ୟବହାର କରନ୍ତୁ |

ଲୋଡିଂ ...
ଲୋଡିଂ ...
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>

ବଟନ୍

ଏକ ପ୍ରକ୍ରିୟା ସମ୍ପ୍ରତି ପ୍ରକ୍ରିୟାକରଣ କିମ୍ବା ଘଟୁଛି ସୂଚାଇବା ପାଇଁ ବଟନ୍ ମଧ୍ୟରେ ସ୍ପିନର୍ ବ୍ୟବହାର କରନ୍ତୁ | ଆପଣ ସ୍ପିନର ଉପାଦାନରୁ ଟେକ୍ସଟ୍ ଅଦଳବଦଳ କରିପାରିବେ ଏବଂ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ବଟନ୍ ଟେକ୍ସଟ୍ ବ୍ୟବହାର କରିପାରିବେ |

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">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>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">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>