Sourceꯁ꯭ꯄꯤꯅꯥꯔꯁꯤꯡ꯫
HTML, CSS, ꯑꯃꯁꯨꯡ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯕꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁꯦꯝꯕꯥ, ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯁ꯭ꯄꯤꯅꯥꯔꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯅꯠꯠꯔꯒꯥ ꯄꯦꯖ ꯑꯃꯒꯤ ꯂꯣꯗ ꯇꯧꯕꯒꯤ ꯐꯤꯚꯝ ꯑꯗꯨ ꯇꯥꯀꯎ.
ꯃꯔꯝꯗꯤ
ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ “ꯁ꯭ꯄꯤꯅꯥꯔꯁꯤꯡ” ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯁꯤꯡꯗꯥ ꯂꯣꯗꯤꯡ ꯁ꯭ꯇꯦꯠ ꯑꯗꯨ ꯎꯠꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫ ꯃꯈꯣꯌ ꯑꯁꯤ HTML ꯑꯃꯁꯨꯡ CSS ꯈꯛꯇꯅꯥ ꯁꯥꯕꯅꯤ, ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯃꯈꯣꯌ ꯑꯁꯤ ꯁꯦꯝꯅꯕꯒꯤꯗꯃꯛ ꯅꯍꯥꯛꯅꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯃꯠꯇꯥ ꯃꯊꯧ ꯇꯥꯗꯦ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯃꯈꯣꯌꯒꯤ ꯚꯤꯖꯤꯕꯤꯂꯤꯇꯤ ꯇꯣꯒꯜ ꯇꯧꯅꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯁ꯭ꯇꯝ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯈꯔꯥ ꯃꯊꯧ ꯇꯥꯒꯅꯤ꯫ ꯃꯈꯣꯌꯒꯤ ꯃꯑꯣꯡ ꯃꯇꯧ, ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ, ꯑꯃꯁꯨꯡ ꯁꯥꯏꯖ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯉꯀꯄꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯐꯖꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫
ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤꯒꯤ ꯄꯥꯟꯗꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ, ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯂꯣꯗꯔ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯌꯥꯑꯣꯔꯤ role="status"
ꯑꯃꯁꯨꯡ ꯅꯦꯁ꯭ꯇꯦꯗ <span class="sr-only">Loading...</span>
.
ꯕꯣꯔꯗꯔ ꯁ꯭ꯄꯤꯅꯥꯔ ꯑꯣꯏꯕꯥ꯫
ꯂꯥꯏꯠꯋꯦꯠ ꯂꯣꯗꯤꯡ ꯏꯟꯗꯤꯀꯦꯇꯔ ꯑꯃꯒꯤꯗꯃꯛ ꯕꯣꯔꯗꯔ ꯁ꯭ꯄꯤꯅꯔꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯃꯆꯨꯁꯤꯡ꯫
ꯕꯣꯔꯗꯔ ꯁ꯭ꯄꯤꯅꯥꯔꯅꯥ currentColor
ꯃꯁꯤꯒꯤꯗꯃꯛꯇꯥ ꯁꯤꯖꯤꯟꯅꯩ , ꯃꯁꯤꯒꯤ border-color
ꯑꯔꯊꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯇꯦꯛꯁꯠ ꯃꯆꯨꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯆꯨ ꯑꯗꯨ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯏ . ꯑꯗꯣꯝꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯇꯦꯛꯁꯠ ꯀꯂꯔ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯁ꯭ꯄꯤꯅꯥꯔꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
border-color
ꯀꯔꯤꯒꯤꯗꯃꯛ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯤꯕꯅꯣ ? ꯕꯣꯔꯗꯔ ꯁ꯭ꯄꯤꯅꯥꯔ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ transparent
ꯌꯥꯃꯗ꯭ꯔꯕꯗꯥ ꯁꯥꯏꯗ ꯑꯃꯒꯤꯗꯃꯛ ꯕꯣꯔꯗꯔ ꯑꯃꯥ ꯁꯦꯝꯃꯤ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ .border-{color}
ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯅꯥ ꯃꯗꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯒꯅꯤ꯫
ꯍꯦꯅꯒꯠꯂꯛꯂꯤꯕꯥ ꯁ꯭ꯄꯤꯅꯥꯔ꯫
ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯕꯣꯔꯗꯔ ꯁ꯭ꯄꯤꯅꯥꯔ ꯑꯃꯥ ꯐꯦꯟꯁꯤꯡ ꯇꯧꯗ꯭ꯔꯕꯗꯤ, ꯒ꯭ꯔꯣ ꯁ꯭ꯄꯤꯅꯥꯔ ꯑꯗꯨꯗꯥ ꯍꯣꯡꯗꯣꯀꯎ꯫ ꯇꯦꯛꯅꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯁ꯭ꯄꯤꯟ ꯇꯧꯗ꯭ꯔꯤꯉꯩꯗꯥ, ꯃꯁꯤ ꯍꯟꯖꯤꯟ ꯍꯟꯖꯤꯟ ꯍꯦꯅꯒꯠꯂꯀꯏ!
ꯑꯃꯨꯛ ꯍꯟꯅꯥ , ꯁ꯭ꯄꯤꯅꯥꯔ currentColor
ꯑꯁꯤ . ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯃꯁꯤ ꯕ꯭ꯂꯨꯗꯥ ꯂꯩ, ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤꯕꯥ ꯚꯦꯔꯤꯑꯦꯟꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯂꯣꯗ ꯇꯧꯔꯤ...
ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯁ꯭ꯄꯤꯅꯥꯔꯁꯤꯡ ꯑꯁꯤ rem
s, currentColor
, ꯑꯃꯁꯨꯡ display: inline-flex
. ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯃꯈꯣꯌ ꯑꯁꯤ ꯐꯖꯅꯥ ꯁꯥꯏꯖ ꯇꯧꯕꯥ ꯌꯥꯏ, ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯃꯆꯨ ꯁꯪꯍꯅꯕꯥ ꯌꯥꯏ ꯑꯃꯁꯨꯡ ꯊꯨꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ ꯌꯥꯏ꯫
ꯄꯟꯈꯩ
ꯐꯖꯅꯥ ꯁ꯭ꯄꯦꯁꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛꯇꯥꯒꯨꯝꯕꯥ ꯃꯥꯔꯖꯤꯟ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫.m-5
ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫
ꯐꯤꯚꯝ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯐꯃꯗꯥ ꯁ꯭ꯄꯤꯅꯥꯔꯁꯤꯡ ꯑꯗꯨ ꯑꯆꯨꯝꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯊꯝꯅꯕꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ , ꯐ꯭ꯂꯣꯠ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ , ꯅꯠꯠꯔꯒꯥ ꯇꯦꯛꯁꯠ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯊꯦꯛ ꯀꯣꯟꯕ ꯌꯥꯕ
ꯐ꯭ꯂꯣꯠ ꯇꯧꯏ꯫
ꯇꯦꯛꯁꯠ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫
ꯆꯥꯎꯕꯒꯤ ꯆꯥꯡ
ꯍꯥꯄꯆꯤꯅꯕꯥ .spinner-border-sm
ꯑꯃꯁꯨꯡ .spinner-grow-sm
ꯑꯇꯣꯞꯄꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯨꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯥ ꯑꯄꯤꯀꯄꯥ ꯁ꯭ꯄꯤꯅꯥꯔ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ꯫
ꯅꯠꯔꯒꯥ, ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯗꯥꯏꯃꯦꯟꯁꯅꯁꯤꯡ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯀꯁ꯭ꯇꯝ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯅꯠꯔꯒꯥ ꯏꯅꯂꯥꯏꯟ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯑꯦꯛꯁꯟ ꯑꯃꯥ ꯍꯧꯖꯤꯛ ꯄ꯭ꯔꯣꯁꯦꯁ ꯇꯧꯔꯤ ꯅꯠꯠꯔꯒꯥ ꯄꯥꯡꯊꯣꯛꯂꯤ ꯍꯥꯌꯕꯥ ꯇꯥꯛꯅꯕꯥ ꯕꯇꯅꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯁ꯭ꯄꯤꯅꯥꯔꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯅꯍꯥꯛꯅꯥ ꯁ꯭ꯄꯤꯅꯥꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯒꯤ ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯁꯣꯞ ꯇꯧꯕꯁꯨ ꯌꯥꯏ ꯑꯃꯁꯨꯡ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯕꯇꯟ ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯕꯁꯨ ꯌꯥꯏ꯫