功能:发送网络请求时等待加载的圈圈动态显示,网络请求成功后关闭提示圈圈
代码:
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="/UploadFiles/2021-04-02/jquery.min.js">效果:
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“jquery实现加载更多"转圈圈"效果(示例代码)”评论...