jquery实现加载更多"转圈圈"效果(示例代码)


Posted in jQuery onNovember 09, 2020

功能:发送网络请求时等待加载的圈圈动态显示,网络请求成功后关闭提示圈圈
代码:
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实现加载更多&quot;转圈圈&quot;效果(示例代码)

到此这篇关于jquery实现加载更多“转圈圈“效果的文章就介绍到这了,更多相关jquery加载更多转圈圈内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

jQuery 相关文章推荐
jquery.validate表单验证插件使用详解
Jun 21 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 #jQuery
Jquery Fade用法详解
Nov 06 #jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 #jQuery
使用jQuery实现购物车
Oct 29 #jQuery
jQuery实现简单评论区功能
Oct 26 #jQuery
jquery插件懒加载的示例
Oct 24 #jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 #jQuery
You might like
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
正则表达式语法
2006/10/09 Javascript
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
jquery插件之easing使用
2010/08/19 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
关于python 跨域处理方式详解
2020/03/28 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
党委书记岗位职责
2013/11/24 职场文书
客服服务心得体会
2013/12/30 职场文书
大班亲子运动会方案
2014/06/10 职场文书
2015年采购员工作总结
2015/04/27 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL