jquery實(shí)現(xiàn)加載更多"轉(zhuǎn)圈圈"效果(示例代碼)
更新時(shí)間：2020年11月09日 15:57:58 作者：智慧女孩要禿頭~
這篇文章主要介紹了jquery實(shí)現(xiàn)加載更多"轉(zhuǎn)圈圈"效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
功能：發(fā)送網(wǎng)絡(luò)請(qǐng)求時(shí)等待加載的圈圈動(dòng)態(tài)顯示，網(wǎng)絡(luò)請(qǐng)求成功后關(guān)閉提示圈圈
代碼：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css畫(huà)動(dòng)態(tài)等待轉(zhuǎn)圈效果</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'})
//這里可以寫(xiě)網(wǎng)絡(luò)請(qǐng)求代碼...
$.ajax({
url: '/api/login',
type: 'POST',
data: {username: '111'},
dataType: 'json',
success: function (data) {//請(qǐng)求成功則關(guān)閉圈圈
$('.toast').css({display: 'none'})
},
error: function (e) {
console.log(e)
}
})
});
</script>
</body>
</html>
效果：
到此這篇關(guān)于jquery實(shí)現(xiàn)加載更多“轉(zhuǎn)圈圈“效果的文章就介紹到這了,更多相關(guān)jquery加載更多轉(zhuǎn)圈圈內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這里給大家推薦9款炫酷的基于jquery的頁(yè)面特效，都是本站比較熱門(mén)的效果，這里整理出來(lái)分享給大家，也方便小伙伴們對(duì)比查看2014-12-12
本文給大家介紹jquery側(cè)邊欄實(shí)現(xiàn)代碼，這些側(cè)邊欄菜單可以用在不同風(fēng)格的網(wǎng)頁(yè)上,如果你覺(jué)得不錯(cuò),可以參考下本文實(shí)現(xiàn)代碼2016-05-05
JQuery實(shí)現(xiàn)帶排序功能的權(quán)限選擇實(shí)例
這篇文章主要介紹了JQuery帶排序功能的權(quán)限選擇,涉及jQuery鼠標(biāo)事件及json數(shù)據(jù)處理的相關(guān)技巧,需要的朋友可以參考下2015-05-05
真正的JQuery.ajax傳遞中文參數(shù)的解決方法
許多人在使用JQuery.ajax方法時(shí)肯定會(huì)遇到一個(gè)問(wèn)題。在編碼不是UTF-8的時(shí)候，當(dāng)傳遞的參數(shù)里有中文的時(shí)候，服務(wù)端Request的時(shí)候都會(huì)出現(xiàn)亂碼。2011-05-05
jQuery實(shí)現(xiàn)數(shù)字加減效果匯總
本文將介紹常見(jiàn)的幾種使用spinner數(shù)字微調(diào)器來(lái)實(shí)現(xiàn)數(shù)字加減的功能的方法。非常的簡(jiǎn)單實(shí)用，這里推薦給大家2014-12-12
因?yàn)橐o新員工進(jìn)行培訓(xùn)jQuery.UI方面的內(nèi)容，我之前學(xué)習(xí)的都是jquery.ui-1.6b的，現(xiàn)在的版本升級(jí)到j(luò)query-ui-1.7.1，除了樣式上有很大調(diào)整以外，API也有了很大的變化。2009-08-08
jQuery實(shí)現(xiàn)的checkbox級(jí)聯(lián)選擇下拉菜單效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的checkbox級(jí)聯(lián)選擇下拉菜單效果,涉及jQuery鼠標(biāo)事件響應(yīng)及表格table動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12
從零開(kāi)始學(xué)習(xí)jQuery (四) jQuery中操作元素的屬性與樣式
本篇文章講解如何使用jQuery獲取和操作元素的屬性和CSS樣式. 其中DOM屬性和元素屬性的區(qū)分值得大家學(xué)習(xí).2011-02-02
jquery實(shí)現(xiàn)的橫向二級(jí)導(dǎo)航效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的橫向二級(jí)導(dǎo)航效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)導(dǎo)航出現(xiàn)下拉菜單切換的效果,非常簡(jiǎn)潔自然,涉及jquery鼠標(biāo)hover事件及頁(yè)面元素樣式的動(dòng)態(tài)改變技巧,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jQuery隱藏和顯示效果實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2016-04-04