欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

漂亮實(shí)用的頁面loading(加載)封裝代碼

 更新時(shí)間：2017年02月03日 08:40:30   作者：笨小孩好笨  
要做一個(gè)異步登錄，打算給用戶做一點(diǎn)提示，所以就網(wǎng)上找了點(diǎn)代碼，自己修改新增了一些，做了一個(gè)html+css+js的功能封裝,供大家參考，需要的朋友參考下吧

要做一個(gè)異步登錄，打算給用戶做一點(diǎn)提示，所以就網(wǎng)上找了點(diǎn)代碼，自己修改新增了一些，做了一個(gè)html+css+js的功能封裝，以備未來直接使用。

html

<!-- 緩沖提示條 --> 
<div class='buffer hidden' id='buffer' > 
  <div class="spinner"> 
   <span class='buffer_tip' id='buffer_tip' >正在登陸</span> 
   <div class="rect1"></div> 
   <div class="rect2"></div> 
   <div class="rect3"></div> 
   <div class="rect4"></div> 
   <div class="rect5"></div> 
  </div> 
</div> 
<!-- 緩沖提示條 -->

css

/*緩沖提示條 start*/ 
.buffer{ 
  background-color: black; 
  height: 120px; 
  width: 60%; 
  margin: auto; 
  filter: alpha(Opacity=60); 
  -moz-opacity: 0.6; 
  opacity: 0.85; 
  border-radius: 7px; 
} 
.buffer_tip{ 
 color: wheat; 
 font-size: 20px; 
 display: block; 
 padding-top: 15px; 
} 
.spinner { 
 margin: -190% auto; 
 height: 60px; 
 text-align: center; 
 font-size: 10px; 
} 
.spinner > div { 
 background-color: #67CF22; 
 height: 100%; 
 width: 6px; 
 display: inline-block; 
 -webkit-animation: stretchdelay 1.2s infinite ease-in-out; 
 animation: stretchdelay 1.2s infinite ease-in-out; 
} 
.spinner .rect2 { 
 -webkit-animation-delay: -1.1s; 
 animation-delay: -1.1s; 
} 
.spinner .rect3 { 
 -webkit-animation-delay: -1.0s; 
 animation-delay: -1.0s; 
} 
.spinner .rect4 { 
 -webkit-animation-delay: -0.9s; 
 animation-delay: -0.9s; 
} 
.spinner .rect5 { 
 -webkit-animation-delay: -0.8s; 
 animation-delay: -0.8s; 
} 
@-webkit-keyframes stretchdelay { 
 0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
 20% { -webkit-transform: scaleY(1.0) } 
} 
@keyframes stretchdelay { 
 0%, 40%, 100% { 
  transform: scaleY(0.4); 
  -webkit-transform: scaleY(0.4); 
 } 20% { 
  transform: scaleY(1.0); 
  -webkit-transform: scaleY(1.0); 
 } 
} 
/*緩沖提示條 end*/

js

/*緩沖進(jìn)度條 start*/ 
/** 
 * 顯示loading(加載)動(dòng)畫 
 * @param {[type]} tip_text [提示的文字] 
 * @return {[type]}     [description] 
 */ 
function buffer_tip_show(tip_text){ 
 $("#buffer_tip").html(tip_text ? tip_text : '請稍等'); 
 $("#buffer").removeClass("hidden"); 
} 
/** 
 * 不顯示loading(加載)動(dòng)畫 
 * @return {[type]}     [description] 
 */ 
function buffer_tip_hidden(){ 
 $("#buffer").addClass("hidden"); 
} 
/*緩沖進(jìn)度條 end*/

如果要顯示或者不顯示動(dòng)畫，直接調(diào)用js函數(shù)就可以啦

// 顯示 
buffer_tip_show('正在努力加載中'); 
// 不顯示 
buffer_tip_hidden();

動(dòng)畫效果無法截圖額，將就看下

以上所述是小編給大家介紹的漂亮實(shí)用的頁面loading(加載)封裝代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論