jquery實(shí)現(xiàn)加載更多"轉(zhuǎn)圈圈"效果(示例代碼)

更新時(shí)間：2020年11月09日 15:57:58 作者：智慧女孩要禿頭~

這篇文章主要介紹了jquery實(shí)現(xiàn)加載更多"轉(zhuǎn)圈圈"效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

功能：發(fā)送網(wǎng)絡(luò)請求時(shí)等待加載的圈圈動(dòng)態(tài)顯示，網(wǎng)絡(luò)請求成功后關(guān)閉提示圈圈
代碼：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css畫動(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'})
  //這里可以寫網(wǎng)絡(luò)請求代碼...
  $.ajax({
   url: '/api/login',
   type: 'POST',
   data: {username: '111'},
   dataType: 'json',
   success: function (data) {//請求成功則關(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

推薦9款炫酷的基于jquery的頁面特效
這里給大家推薦9款炫酷的基于jquery的頁面特效，都是本站比較熱門的效果，這里整理出來分享給大家，也方便小伙伴們對比查看
2014-12-12
jQuery側(cè)邊欄實(shí)現(xiàn)代碼
本文給大家介紹jquery側(cè)邊欄實(shí)現(xiàn)代碼，這些側(cè)邊欄菜單可以用在不同風(fēng)格的網(wǎng)頁上,如果你覺得不錯(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è)問題。在編碼不是UTF-8的時(shí)候，當(dāng)傳遞的參數(shù)里有中文的時(shí)候，服務(wù)端Request的時(shí)候都會(huì)出現(xiàn)亂碼。
2011-05-05
jQuery實(shí)現(xiàn)數(shù)字加減效果匯總
本文將介紹常見的幾種使用spinner數(shù)字微調(diào)器來實(shí)現(xiàn)數(shù)字加減的功能的方法。非常的簡單實(shí)用，這里推薦給大家
2014-12-12
jQuery ui 1.7更新小結(jié)
因?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
從零開始學(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)滑過導(dǎo)航出現(xiàn)下拉菜單切換的效果,非常簡潔自然,涉及jquery鼠標(biāo)hover事件及頁面元素樣式的動(dòng)態(tài)改變技巧,需要的朋友可以參考下
2015-08-08
jQuery隱藏和顯示效果實(shí)現(xiàn)
這篇文章主要介紹了jQuery隱藏和顯示效果實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2016-04-04