jquery实现加载更多"转圈圈"效果(示例代码)
更新时间：2020年11月09日 15:57:58 作者：智慧女孩要秃头~
这篇文章主要介绍了jquery实现加载更多"转圈圈"效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
功能：发送网络请求时等待加载的圈圈动态显示，网络请求成功后关闭提示圈圈
代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css画动态等待转圈效果</title>
<link rel="stylesheet" href="public/index.css" rel="external nofollow" >
</head>
<style type="text/css">
.toast {
display: none;
position: fixed;
flex-direction: column;
justify-content: center;
align-items: center;
width: 18rem;
height: 18rem;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #4A4A4B;
border-radius: 1rem;
color: #f0f0f0;
font-size: 2.5rem;
}
.load {
display: inline-block;
margin-bottom: 1.5rem;
height: 4rem;
width: 4rem;
border: 0.4rem solid transparent;
border-top-color: white;
border-left-color: white;
border-bottom-color: white;
animation: circle 1s infinite linear;
-webkit-animation: circle 1s infinite linear; /* Safari 和 Chrome */
border-radius: 50%
}
@-webkit-keyframes circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg)
}
}
</style>
<body>
<div class="toast">
<span class="load"></span>
<span>加载中...</span>
</div>
<script src="public/jquery.min.js"></script>
<script>
$(function () {
$('.toast').css({display: 'flex'})
//这里可以写网络请求代码...
$.ajax({
url: '/api/login',
type: 'POST',
data: {username: '111'},
dataType: 'json',
success: function (data) {//请求成功则关闭圈圈
$('.toast').css({display: 'none'})
},
error: function (e) {
console.log(e)
}
})
});
</script>
</body>
</html>
效果：
到此这篇关于jquery实现加载更多“转圈圈“效果的文章就介绍到这了,更多相关jquery加载更多转圈圈内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这里给大家推荐9款炫酷的基于jquery的页面特效，都是本站比较热门的效果，这里整理出来分享给大家，也方便小伙伴们对比查看2014-12-12
本文给大家介绍jquery侧边栏实现代码，这些侧边栏菜单可以用在不同风格的网页上,如果你觉得不错,可以参考下本文实现代码2016-05-05
这篇文章主要介绍了JQuery带排序功能的权限选择,涉及jQuery鼠标事件及json数据处理的相关技巧,需要的朋友可以参考下2015-05-05
许多人在使用JQuery.ajax方法时肯定会遇到一个问题。在编码不是UTF-8的时候，当传递的参数里有中文的时候，服务端Request的时候都会出现乱码。2011-05-05
本文将介绍常见的几种使用spinner数字微调器来实现数字加减的功能的方法。非常的简单实用，这里推荐给大家2014-12-12
因为要给新员工进行培训jQuery.UI方面的内容，我之前学习的都是jquery.ui-1.6b的，现在的版本升级到jquery-ui-1.7.1，除了样式上有很大调整以外，API也有了很大的变化。2009-08-08
这篇文章主要介绍了jQuery实现的checkbox级联选择下拉菜单效果,涉及jQuery鼠标事件响应及表格table动态操作的相关技巧,需要的朋友可以参考下2016-12-12
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习.2011-02-02
这篇文章主要介绍了jquery实现的横向二级导航效果代码,可实现鼠标滑过导航出现下拉菜单切换的效果,非常简洁自然,涉及jquery鼠标hover事件及页面元素样式的动态改变技巧,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了jQuery隐藏和显示效果实现的相关资料,需要的朋友可以参考下2016-04-04
最新评论