in English

ಸ್ಪಿನ್ನರ್ಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಸ್ಪಿನ್ನರ್‌ಗಳೊಂದಿಗೆ ಘಟಕ ಅಥವಾ ಪುಟದ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ಸೂಚಿಸಿ, ಸಂಪೂರ್ಣವಾಗಿ HTML, CSS ಮತ್ತು ಯಾವುದೇ JavaScript ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ.

ಬಗ್ಗೆ

ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ತೋರಿಸಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ “ಸ್ಪಿನ್ನರ್‌ಗಳನ್ನು” ಬಳಸಬಹುದು. ಅವುಗಳನ್ನು HTML ಮತ್ತು CSS ನೊಂದಿಗೆ ಮಾತ್ರ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಅಂದರೆ ಅವುಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಯಾವುದೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಅವುಗಳ ಗೋಚರತೆಯನ್ನು ಟಾಗಲ್ ಮಾಡಲು ನಿಮಗೆ ಕೆಲವು ಕಸ್ಟಮ್ JavaScript ಅಗತ್ಯವಿರುತ್ತದೆ. ಅವರ ನೋಟ, ಜೋಡಣೆ ಮತ್ತು ಗಾತ್ರವನ್ನು ನಮ್ಮ ಅದ್ಭುತ ಉಪಯುಕ್ತತೆಯ ತರಗತಿಗಳೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು.

ಪ್ರವೇಶಿಸುವಿಕೆ ಉದ್ದೇಶಗಳಿಗಾಗಿ, ಇಲ್ಲಿ ಪ್ರತಿ ಲೋಡರ್ ಒಳಗೊಂಡಿದೆ 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 ಬಣ್ಣವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು . ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಸ್ಪಿನ್ನರ್‌ನಲ್ಲಿ ನಮ್ಮ ಯಾವುದೇ ಪಠ್ಯ ಬಣ್ಣದ ಉಪಯುಕ್ತತೆಗಳನ್ನು ನೀವು ಬಳಸಬಹುದು.

<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}ಉಪಯುಕ್ತತೆಗಳು ಅದನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ.

ಬೆಳೆಯುತ್ತಿರುವ ಸ್ಪಿನ್ನರ್

ನೀವು ಬಾರ್ಡರ್ ಸ್ಪಿನ್ನರ್ ಅನ್ನು ಇಷ್ಟಪಡದಿದ್ದರೆ, ಗ್ರೋ ಸ್ಪಿನ್ನರ್‌ಗೆ ಬದಲಿಸಿ. ಇದು ತಾಂತ್ರಿಕವಾಗಿ ಸ್ಪಿನ್ ಮಾಡದಿದ್ದರೂ, ಅದು ಪದೇ ಪದೇ ಬೆಳೆಯುತ್ತದೆ!

<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 ಅಥವಾ ಇನ್‌ಲೈನ್ ಶೈಲಿಗಳನ್ನು ಬಳಸಿ.

<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>