資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何建立 Bootstrap 載入動畫並在 API 資料載入期間顯示在螢幕上？
使用 Bootstrap，我們將建立一個 Bootstrap 載入動畫，並在從 API 載入資料之前將其顯示在螢幕上。這將為客戶提供視覺指示，表明後臺正在發生某些操作，並且可以成為改善使用者體驗的絕佳方法。在本博文中，我們將使用 Bootstrap，一個著名的前端程式設計框架。
請按照以下步驟建立 Bootstrap 載入動畫，並在 API 資料載入期間顯示在螢幕上：
步驟 1：包含 Bootstrap CSS 和 JavaScript 檔案
我們將從第一步開始，在 index.html 檔案中匯入 JavaScript (jQuery.min.js) 和 CSS 檔案 (bootstrap.min.css)。下面寫了要使用的連結和指令碼標籤。請複製並貼上這些程式碼行到 HTML 檔案的 head 部分。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js "></script>
步驟 2：建立載入動畫元素
現在是我們的下一步，即在 index.html 檔案的 body 部分新增一個 div 元素。我們將提供一個名為“text-center”的類和一個名為 spinner 的 id。我們還將使用一個“i”標籤，該標籤將具有載入動畫的 Bootstrap 類，即 fa、fa-spinner、fa-spin 和 fa-3x。我們在這裡使用四個類只是為了保持頁面的響應性。
<div class="text-center" id="spinner"> <i class="fa fa-spinner fa-spin fa-3x"></i> </div>
步驟 3：預設隱藏載入動畫
我們在建立載入動畫過程中的第三步是，預設隱藏載入動畫。我們不希望載入動畫一直可見。載入動畫必須僅在 API 載入資料時可見。
為此，我們將使用 id 選擇器併為其設定 display:none 屬性。
#spinner {
display: none;
}
步驟 4：在資料載入時顯示載入動畫
我們的第四步是在資料載入期間顯示載入動畫。我們將簡單地使用名為 show() 的函式來做到這一點。
$("#spinner").show();
步驟 5：在資料載入完成後隱藏載入動畫
我們的下一步是在資料完全載入後隱藏載入動畫。我們將簡單地使用名為 hide() 的函式來做到這一點。
$("#spinner").hide();
步驟 6：呼叫 API 並顯示載入動畫
在此步驟中，我們將整合上述所有三個步驟以生成一個載入動畫，該載入動畫將在載入資料時顯示載入動畫，並在資料載入完成後自動隱藏。
$.ajax({
url: "api_url",
method: "GET",
beforeSend: function() {
$("#spinner").show();
},
success: function(data) {
// do something with the data
},
complete: function() {
$("#spinner").hide();
}
});
在向提供的 API url 提交 GET 呼叫時，載入動畫將在請求提交之前顯示，並在請求交付後刪除。由 API 提供的資料應在成功方法中處理，例如，在螢幕上顯示。
注意 - 要聯絡 API 並顯示載入動畫，您還可以使用 javascript Fetch API 方法而不是 $.ajax 方法。
個性化載入動畫
成功建立載入動畫並使其完全發揮作用後。我們可以透過使用 Font Awesome 庫來定製它，該庫可用於在本教程中生成旋轉符號。我們還可以修改載入動畫的圖示、大小、顏色和其他 CSS 屬性。
要調整載入動畫的大小，只需將“fa-3x”類替換為“fa-4x”或“fa-5x”。我們還可以透過向 I 元素新增一個新類並在 CSS 檔案中宣告它來更改載入動畫的顏色。
現在，讓我們將我們在 index.html 檔案中的所有工作組合在一起。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Spinner Tutorial</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
#spinner {
position: absolute;
top: 50%;
left: 50%;
width: 3.5rem;
height: 3.5rem;
/* transform: translate(-50%, -50%); */
display: none;
}
</style>
</head>
<body>
<div class="spinner-border m-5" role="status" id="spinner">
<span class="visually-hidden">Loading...</span>
</div>
<div id="dataContainer"></div>
<script>
function getData() {
var spinner = document.getElementById("spinner");
spinner.style.display = "block";
setTimeout(function () {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((data) => {
data.forEach((item) => {
var div = document.createElement("div");
var p = document.createElement("p");
p.innerText = item.title;
div.appendChild(p);
document.getElementById("dataContainer").appendChild(div);
});
spinner.style.display = "none";
});
}, 5000);
}
getData();
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous" ></script>
</body>
</html>
在本教程中，我們首先介紹了在 index 檔案中新增必需的檔案，即 js 和 css。然後我們使用 bootstrap 庫建立了載入動畫，並使用 jquery 庫使其發揮作用。我們還討論了使用 font awesome 庫自定義載入動畫。最後，我們透過將所有程式碼包含在 index.html 檔案中結束了我們的討論。
7K+ 閱讀量
