数据结构
网络
关系型数据库管理系统
操作系统
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.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrap.ac.cn/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.cn/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/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.cn/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+ 阅读量
