Bootstrap中怎麼實作載入效果？以下這篇文章就來跟大家介紹Bootstrap5讀取圖示（Spinners）元件的用法，看看怎麼讀取圖示來表示元件載入狀態，希望對大家有幫助！
使用Bootstrap讀取圖示以表示元件載入狀態，這些讀取圖示完全使用HTML，CSS，而沒有使用到JavaScript。它們的外觀、對齊以及尺寸都可以透過通用類別來自訂,但您仍需要客製JavaScript來切換它們的顯示狀況。 【相關推薦：《bootstrap教學》】
下面是一個簡單的讀取圖示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>读取图标</title>
</head>
<body>
<div>
<br><br><br><br>
<div role="status">
<span>Loading...</span>
</div>
</div>
</body>
</html>邊框讀取圖示使用currentColor來當作它的border-color，這代表你可以使用文字顏色通用類別來自訂它的顏色。你可以在標準的讀取圖示上使用任何通用類別中的顏色。
<div class="spinner-border text-primary" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-secondary" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-success" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-danger" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-warning" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-info" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-light" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-dark" role="status"> <span class="visually-hidden">Loading...</span> </div>
如果你不喜歡邊框讀取圖標，可以切換到漸變讀取圖標。雖然技術上來說，它不會旋轉，但它會反覆漸變顯示！ 漸層圖示也支援不同的顏色。
<div class="spinner-grow" role="status"> <span class="visually-hidden">Loading...</span> </div>
同上，這個讀取圖示也使用currentColor，所以你可以輕易地使用文字顏色通用類別來改變它的外觀。這邊是藍色，以及它所支援的顏色變化。
<div class="spinner-grow text-primary" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-secondary" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-success" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-danger" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-warning" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-info" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-light" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-dark" role="status"> <span class="visually-hidden">Loading...</span> </div>
使用margin utilities像m-5一樣簡單地增加間隔。
<div class="spinner-border m-5" role="status"> <span class="visually-hidden">Loading...</span> </div>
使用flexbox通用類別、float通用類別，或文字排版在任何情況下都可以將讀取圖示精確地放置在您需要的位置。
5.1 Flex
以下是居中對準
<div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
<div class="d-flex align-items-center"> <strong>Loading...</strong> <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div> </div>
5.2 Float
浮動實作靠右對準<div class="clearfix"> <div class="spinner-border float-end" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
##5.3 文字通用類別
<div class="text-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
<div class="spinner-border spinner-border-sm" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow spinner-grow-sm" role="status"> <span class="visually-hidden">Loading...</span> </div>
顯示較大的圖示<div class="spinner-border" style="max-width:90%" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status"> <span class="visually-hidden">Loading...</span> </div>
#在按鈕內使用讀取取圖示是表示目前正在處理或正在進行操作。您也可以依照需求使用button text來更換讀取圖示的文字。
<button class="btn btn-primary" type="button" disabled> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">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="visually-hidden">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>
以上是Bootstrap中怎麼實現載入效果？讀取圖標（Spinners）組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
