ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಸ್ಪಿನ್ನರ್ಗಳೊಂದಿಗೆ ಘಟಕ ಅಥವಾ ಪುಟದ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ಸೂಚಿಸಿ, ಸಂಪೂರ್ಣವಾಗಿ HTML, CSS ಮತ್ತು ಯಾವುದೇ JavaScript ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ.
ಬಗ್ಗೆ
ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ಗಳಲ್ಲಿ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ತೋರಿಸಲು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ “ಸ್ಪಿನ್ನರ್ಗಳನ್ನು” ಬಳಸಬಹುದು. ಅವುಗಳನ್ನು HTML ಮತ್ತು CSS ನೊಂದಿಗೆ ಮಾತ್ರ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಅಂದರೆ ಅವುಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಯಾವುದೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಅವುಗಳ ಗೋಚರತೆಯನ್ನು ಟಾಗಲ್ ಮಾಡಲು ನಿಮಗೆ ಕೆಲವು ಕಸ್ಟಮ್ JavaScript ಅಗತ್ಯವಿರುತ್ತದೆ. ಅವರ ನೋಟ, ಜೋಡಣೆ ಮತ್ತು ಗಾತ್ರವನ್ನು ನಮ್ಮ ಅದ್ಭುತ ಉಪಯುಕ್ತತೆಯ ತರಗತಿಗಳೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು.
ಪ್ರವೇಶಿಸುವಿಕೆ ಉದ್ದೇಶಗಳಿಗಾಗಿ, ಇಲ್ಲಿ ಪ್ರತಿ ಲೋಡರ್ ಒಳಗೊಂಡಿದೆ role="status"ಮತ್ತು ನೆಸ್ಟೆಡ್ <span class="sr-only">Loading...</span>.
ಬಾರ್ಡರ್ ಸ್ಪಿನ್ನರ್
ಹಗುರವಾದ ಲೋಡಿಂಗ್ ಸೂಚಕಕ್ಕಾಗಿ ಗಡಿ ಸ್ಪಿನ್ನರ್ಗಳನ್ನು ಬಳಸಿ.
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಬಣ್ಣಗಳು
ಗಡಿ ಸ್ಪಿನ್ನರ್ ಇದನ್ನು ಬಳಸುತ್ತದೆ currentColor, ಅಂದರೆ ನೀವು ಪಠ್ಯ ಬಣ್ಣದ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆborder-color ಬಣ್ಣವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು . ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಸ್ಪಿನ್ನರ್ನಲ್ಲಿ ನಮ್ಮ ಯಾವುದೇ ಪಠ್ಯ ಬಣ್ಣದ ಉಪಯುಕ್ತತೆಗಳನ್ನು ನೀವು ಬಳಸಬಹುದು.
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
border-colorಉಪಯುಕ್ತತೆಗಳನ್ನು ಏಕೆ ಬಳಸಬಾರದು ? ಪ್ರತಿ ಗಡಿ ಸ್ಪಿನ್ನರ್ transparentಕನಿಷ್ಠ ಒಂದು ಬದಿಗೆ ಗಡಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ .border-{color}ಉಪಯುಕ್ತತೆಗಳು ಅದನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ.
ಬೆಳೆಯುತ್ತಿರುವ ಸ್ಪಿನ್ನರ್
ನೀವು ಬಾರ್ಡರ್ ಸ್ಪಿನ್ನರ್ ಅನ್ನು ಇಷ್ಟಪಡದಿದ್ದರೆ, ಗ್ರೋ ಸ್ಪಿನ್ನರ್ಗೆ ಬದಲಿಸಿ. ಇದು ತಾಂತ್ರಿಕವಾಗಿ ಸ್ಪಿನ್ ಮಾಡದಿದ್ದರೂ, ಅದು ಪದೇ ಪದೇ ಬೆಳೆಯುತ್ತದೆ!
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಮತ್ತೊಮ್ಮೆ, ಈ ಸ್ಪಿನ್ನರ್ ಅನ್ನು ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ , ಆದ್ದರಿಂದ ನೀವು ಪಠ್ಯ ಬಣ್ಣದ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆcurrentColor ಅದರ ನೋಟವನ್ನು ಸುಲಭವಾಗಿ ಬದಲಾಯಿಸಬಹುದು . ಇಲ್ಲಿ ಇದು ಬೆಂಬಲಿತ ರೂಪಾಂತರಗಳೊಂದಿಗೆ ನೀಲಿ ಬಣ್ಣದಲ್ಲಿದೆ.
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಜೋಡಣೆ
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿ ಸ್ಪಿನ್ನರ್ಗಳನ್ನು rems, currentColor, ಮತ್ತು ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ display: inline-flex. ಇದರರ್ಥ ಅವುಗಳನ್ನು ಸುಲಭವಾಗಿ ಮರುಗಾತ್ರಗೊಳಿಸಬಹುದು, ಮರುಬಣ್ಣಗೊಳಿಸಬಹುದು ಮತ್ತು ತ್ವರಿತವಾಗಿ ಜೋಡಿಸಬಹುದು.
ಇತರ ಘಟಕಗಳಲ್ಲಿ ತ್ವರಿತವಾಗಿ ಬಳಸಬಹುದಾದ ಸಣ್ಣ ಸ್ಪಿನ್ನರ್ ಅನ್ನು ಸೇರಿಸಿ .spinner-border-smಮತ್ತು ಮಾಡಲು..spinner-grow-sm
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಅಥವಾ, ಅಗತ್ಯವಿರುವಂತೆ ಆಯಾಮಗಳನ್ನು ಬದಲಾಯಿಸಲು ಕಸ್ಟಮ್ CSS ಅಥವಾ ಇನ್ಲೈನ್ ಶೈಲಿಗಳನ್ನು ಬಳಸಿ.
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
ಗುಂಡಿಗಳು
ಕ್ರಿಯೆಯನ್ನು ಪ್ರಸ್ತುತ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತಿದೆ ಅಥವಾ ನಡೆಯುತ್ತಿದೆ ಎಂದು ಸೂಚಿಸಲು ಬಟನ್ಗಳ ಒಳಗೆ ಸ್ಪಿನ್ನರ್ಗಳನ್ನು ಬಳಸಿ. ನೀವು ಸ್ಪಿನ್ನರ್ ಅಂಶದಿಂದ ಪಠ್ಯವನ್ನು ವಿನಿಮಯ ಮಾಡಿಕೊಳ್ಳಬಹುದು ಮತ್ತು ಅಗತ್ಯವಿರುವಂತೆ ಬಟನ್ ಪಠ್ಯವನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು.