jquery實現載入更多"轉圈圈"效果(示例程式碼)
阿新 • • 發佈：2020-11-11
功能：傳送網路請求時等待載入的圈圈動態顯示，網路請求成功後關閉提示圈圈
程式碼：
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實現載入更多“轉圈圈“效果的文章就介紹到這了,更多相關jquery載入更多轉圈圈內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！