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

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

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

    .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) } }   加载中...

效果：

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

以上就是jquery实现加载更多"转圈圈"效果(示例代码)的详细内容，更多请关注本站其它相关文章！