微信小程序怎么制作_jquery完成加载更多＂转圈圈

jquery实现加载更多 转圈圈 效果(示例代码)     ~   这篇文章主要介绍了jquery实现加载更多 转圈圈 效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

功能：发送网络请求时等待加载的圈圈动态显示，网络请求成功后关闭提示圈圈
代码：

 !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 
 span /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加载更多转圈圈内容请搜索凡科以前的文章或继续浏览下面的