手撸一个简单的 Loading 提示框

Loading 提示框可以向用户明确展示页面正在加载的状态，避免用户认为页面无响应或出现错误，这有助于提升用户体验，让用户知道他们的请求正在处理中。下面将和大家一起手撸一个简单的 Loading 提示框。

1.首先，在页面中添加一个用于显示提示框的 HTML 元素，例如：

<div id="loading" class="loading-div">
    <img src="loading.gif" />
    <p>Loading...</p>
</div>

其中，loading.gif 是用于显示加载动画的图片，如果只需要动画，不需要文字提示，可以去掉 p 标签。

2.在页面中添加以下 class 样式

<style type="text/css">
.loading-div {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

display: none 使弹框默认隐藏，position: fixed 保持其固定位置不变，z-index: 9999 确保其在页面最上层不被遮挡，top: 50% 和 left: 50% 将其移动到视口的中心位置，然后，通过 transform: translate(-50%, -50%) 将元素的中心点移动到它自身的中心，从而实现在屏幕正中央显示。

3.最后，使用 JavaScript 控制 Loading 提示框的显示和隐藏：

<script type="text/javascript" charset="utf-8">
// 获取到loading弹框div
var loading = $('#loading');
// 显示loading弹框
loading.show();
// 隐藏loading弹框
loading.hide();
</script>

希望这个小教程能帮助到你，嘿嘿嘿！