Sourceସ୍ପିନର୍ସ |
ବୁଟଷ୍ଟ୍ରାପ୍ ସ୍ପିନର୍ ସହିତ ଏକ ଉପାଦାନ କିମ୍ବା ପୃଷ୍ଠାର ଲୋଡିଂ ସ୍ଥିତିକୁ ସୂଚାନ୍ତୁ, ସମ୍ପୁର୍ଣ୍ଣ ଭାବରେ HTML, CSS ସହିତ ନିର୍ମିତ, ଏବଂ କ Java ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟ ନାହିଁ |
ବିଷୟରେ
ତୁମର ପ୍ରୋଜେକ୍ଟରେ ଲୋଡିଂ ସ୍ଥିତି ଦେଖାଇବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ “ସ୍ପିନର୍ସ” ବ୍ୟବହାର କରାଯାଇପାରିବ | ସେଗୁଡ଼ିକ କେବଳ HTML ଏବଂ CSS ସହିତ ନିର୍ମିତ, ଅର୍ଥାତ୍ ସେଗୁଡିକ ସୃଷ୍ଟି କରିବା ପାଇଁ ଆପଣଙ୍କୁ କ Java ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟର ଆବଶ୍ୟକତା ନାହିଁ | ସେମାନଙ୍କର ଭିଜିବିଲିଟି ଟୋଗଲ୍ କରିବାକୁ ଆପଣ, ତଥାପି, କିଛି କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ କରିବେ | ଆମର ଚମତ୍କାର ଉପଯୋଗୀ ଶ୍ରେଣୀଗୁଡ଼ିକ ସହିତ ସେମାନଙ୍କର ରୂପ, ଆଲାଇନ୍ମେଣ୍ଟ୍ ଏବଂ ସାଇଜ୍ ସହଜରେ କଷ୍ଟମାଇଜ୍ ହୋଇପାରିବ |
ଆକ୍ସେସିବିଲିଟି ଉଦ୍ଦେଶ୍ୟ ପାଇଁ, ଏଠାରେ ପ୍ରତ୍ୟେକ ଲୋଡର୍ ଅନ୍ତର୍ଭୁକ୍ତ role="status"
ଏବଂ ଏକ ନେଷ୍ଟେଡ୍ <span class="sr-only">Loading...</span>
|
ସୀମା ସ୍ପିନର |
ହାଲୁକା ଲୋଡିଂ ସୂଚକ ପାଇଁ ସୀମା ସ୍ପିନର ବ୍ୟବହାର କରନ୍ତୁ |
ରଙ୍ଗଗୁଡିକ |
ସୀମା ସ୍ପିନର currentColor
ଏହାର ବ୍ୟବହାର କରେ border-color
, ଅର୍ଥାତ୍ ଆପଣ ଟେକ୍ସଟ୍ ରଙ୍ଗ ଉପଯୋଗିତା ସହିତ ରଙ୍ଗ କଷ୍ଟୋମାଇଜ୍ କରିପାରିବେ | ଷ୍ଟାଣ୍ଡାର୍ଡ ସ୍ପିନରରେ ଆପଣ ଆମର ଯେକ text ଣସି ଟେକ୍ସଟ୍ ରଙ୍ଗ ଉପଯୋଗିତା ବ୍ୟବହାର କରିପାରିବେ |
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
border-color
ଉପଯୋଗିତା କାହିଁକି ବ୍ୟବହାର କରୁନାହାଁନ୍ତି ? ପ୍ରତ୍ୟେକ ସୀମା ସ୍ପିନର transparent
ଅତିକମରେ ଗୋଟିଏ ପାର୍ଶ୍ୱ ପାଇଁ ଏକ ସୀମା ନିର୍ଦ୍ଦିଷ୍ଟ କରେ, ତେଣୁ .border-{color}
ଉପଯୋଗିତା ଏହାକୁ ଅତିକ୍ରମ କରିବ |
ବ sp ୁଥିବା ସ୍ପିନର |
ଯଦି ଆପଣ ଏକ ସୀମା ସ୍ପିନର କଳ୍ପନା କରନ୍ତି ନାହିଁ, ବ grow ଼ୁଥିବା ସ୍ପିନରକୁ ଯାଆନ୍ତୁ | ଯଦିଓ ଏହା ଟେକ୍ନିକାଲ୍ ସ୍ପିନ୍ ନୁହେଁ, ଏହା ବାରମ୍ବାର ବ grow େ!
ପୁନର୍ବାର, ଏହି ସ୍ପିନର୍ ସହିତ ନିର୍ମିତ ହୋଇଛି , ତେଣୁ ଆପଣ ପାଠ୍ୟ ରଙ୍ଗ ଉପଯୋଗୀତାcurrentColor
ସହିତ ସହଜରେ ଏହାର ରୂପ ପରିବର୍ତ୍ତନ କରିପାରିବେ | ସମର୍ଥିତ ପ୍ରକାରଗୁଡିକ ସହିତ ଏଠାରେ ଏହା ନୀଳ ରଙ୍ଗର |
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଲୋଡିଂ ...
ଶ୍ରେଣୀବଦ୍ଧତା |
ବୁଟଷ୍ଟ୍ରାପରେ ସ୍ପିନର୍ ଗୁଡିକ rem
s, currentColor
ଏବଂ ସହିତ ନିର୍ମିତ display: inline-flex
| ଏହାର ଅର୍ଥ ସେଗୁଡିକ ସହଜରେ ଆକାର ପରିବର୍ତ୍ତନ, ରଙ୍ଗ ଏବଂ ଶୀଘ୍ର ଆଲାଇନ୍ ହୋଇପାରିବ |
ମାର୍ଜିନ୍
ସହଜ ବ୍ୟବଧାନ ପାଇଁ ମାର୍ଜିନ୍ ଉପଯୋଗିତା ବ୍ୟବହାର କରନ୍ତୁ |.m-5
ସ୍ଥାନ
ସ୍ପିନରମାନଙ୍କୁ ଠିକ୍ ସ୍ଥାନରେ ରଖିବା ପାଇଁ ଫ୍ଲେକ୍ସବକ୍ସ ଉପଯୋଗିତା , ଫ୍ଲୋଟ୍ ଉପଯୋଗିତା , କିମ୍ବା ଟେକ୍ସଟ୍ ଆଲାଇନମେଣ୍ଟ୍ ଉପଯୋଗିତା ବ୍ୟବହାର କରନ୍ତୁ |
ଫ୍ଲେକ୍ସ
ଭାସମାନ |
ପାଠ୍ୟ ଆଲାଇନ୍ |
ଆକାର |
ଏକ ଛୋଟ ସ୍ପିନର ଯୋଡନ୍ତୁ .spinner-border-sm
ଏବଂ .spinner-grow-sm
ତିଆରି କରନ୍ତୁ ଯାହା ଶୀଘ୍ର ଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକ ମଧ୍ୟରେ ବ୍ୟବହୃତ ହୋଇପାରିବ |
କିମ୍ବା, ଆବଶ୍ୟକ ଅନୁଯାୟୀ ପରିମାପ ପରିବର୍ତ୍ତନ କରିବାକୁ କଷ୍ଟମ୍ CSS କିମ୍ବା ଇନଲାଇନ ଶ yles ଳୀ ବ୍ୟବହାର କରନ୍ତୁ |
ଏକ ପ୍ରକ୍ରିୟା ସମ୍ପ୍ରତି ପ୍ରକ୍ରିୟାକରଣ କିମ୍ବା ଘଟୁଛି ସୂଚାଇବା ପାଇଁ ବଟନ୍ ମଧ୍ୟରେ ସ୍ପିନର୍ ବ୍ୟବହାର କରନ୍ତୁ | ଆପଣ ସ୍ପିନର ଉପାଦାନରୁ ଟେକ୍ସଟ୍ ଅଦଳବଦଳ କରିପାରିବେ ଏବଂ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ବଟନ୍ ଟେକ୍ସଟ୍ ବ୍ୟବହାର କରିପାରିବେ |