ബൂട്ട്സ്ട്രാപ്പ് സ്പിന്നറുകൾ ഉള്ള ഒരു ഘടകത്തിന്റെ അല്ലെങ്കിൽ പേജിന്റെ ലോഡിംഗ് നില സൂചിപ്പിക്കുക, പൂർണ്ണമായും HTML, CSS, കൂടാതെ JavaScript ഇല്ല.
കുറിച്ച്
നിങ്ങളുടെ പ്രോജക്റ്റുകളിൽ ലോഡിംഗ് നില കാണിക്കാൻ ബൂട്ട്സ്ട്രാപ്പ് "സ്പിന്നറുകൾ" ഉപയോഗിക്കാം. അവ HTML, CSS എന്നിവ ഉപയോഗിച്ച് മാത്രമാണ് നിർമ്മിച്ചിരിക്കുന്നത്, അതായത് അവ സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് JavaScript ആവശ്യമില്ല. എന്നിരുന്നാലും, അവയുടെ ദൃശ്യപരത ടോഗിൾ ചെയ്യുന്നതിന് നിങ്ങൾക്ക് ചില ഇഷ്ടാനുസൃത 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 അല്ലെങ്കിൽ ഇൻലൈൻ ശൈലികൾ ഉപയോഗിക്കുക.
ലോഡിംഗ്...
ലോഡിംഗ്...
ബട്ടണുകൾ
ഒരു പ്രവർത്തനം നിലവിൽ പ്രോസസ്സ് ചെയ്യുകയോ നടക്കുകയോ ചെയ്യുന്നുവെന്ന് സൂചിപ്പിക്കാൻ ബട്ടണുകൾക്കുള്ളിൽ സ്പിന്നറുകൾ ഉപയോഗിക്കുക. നിങ്ങൾക്ക് സ്പിന്നർ എലമെന്റിൽ നിന്ന് ടെക്സ്റ്റ് സ്വാപ്പ് ചെയ്ത് ആവശ്യാനുസരണം ബട്ടൺ ടെക്സ്റ്റ് ഉപയോഗിക്കാം.