Ajax 等待中加载中转圈显示

最新推荐文章于 2021-08-06 00:50:18 发布

_YuLF

最新推荐文章于 2021-08-06 00:50:18 发布

阅读量3.8k

点赞数 5

分类专栏：其他工具类文章标签： jquery js javascript css ajax

本文链接：https://blog.youkuaiyun.com/qq_42235984/article/details/109057220

版权

其他工具类专栏收录该内容

6 篇文章

订阅专栏

本文展示了如何利用FontAwesome的旋转图标创建一个页面加载等待效果。通过CSS定位和JavaScript动态添加及移除元素，实现在AJAX请求时显示加载图标，请求完成后隐藏图标。示例代码包括不同类型的旋转图标供选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
我刚好使用到了Font Awesome，所以直接使用了他的图标，当然你也可以换成你自己正在使用的前端框架转圈图标，也可以自己找个转圈的gif图片都可以，

CSS

#loading{position:fixed;top:48%;left:48%;z-index:99999;}

JavaScript

function loadingShow(){
        var loading = '<i id="loading"  class="fa fa-spinner fa-spin fa-3x fa-fw"></i>';
        $('body').append($(loading));
 }
 function loadingRemove(){
        setTimeout(function () {
            $('#loading').remove();
        }, 1000);
 }

使用

function f(){
loadingShow();//显示转圈中等待
//执行ajax
loadingRemove();//移除转圈中等待
setTimeout(function () {$("#databasesLogModal").modal('show')},1000);//后面的功能等1秒后在执行
}

Font Awesome其他的一些转圈图标
在这里插入图片描述

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>