功能：發送網絡請求時等待加載的圈圈動態顯示，網絡請求成功后關閉提示圈圈
代碼：
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<!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加載更多轉圈圈內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_44824839/article/details/109577896
