漂亮实用的loading(加载)封装

要做一个异步登录，打算给用户做一点提示，所以就网上找了点代码，自己修改新增了一些，做了一个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*/

/*缓冲进度条 start*//*** 显示loading(加载)动画* @param  {[type]} tip_text [提示的文字]* @return {[type]}          [description]*/
function buffer_tip_show(tip_text){$("#buffer_tip").html(tip_text ? tip_text : '请稍等');$("#buffer").removeClass("hidden");
}/*** 不显示loading(加载)动画* @return {[type]}          [description]*/
function buffer_tip_hidden(){$("#buffer").addClass("hidden");
}/*缓冲进度条 end*/

如果要显示或者不显示动画，直接调用js函数就可以啦

// 显示
buffer_tip_show('正在努力加载中');
// 不显示
buffer_tip_hidden();

动画效果无法截图额，将就看下

漂亮实用的loading(加载)封装相关推荐

html新建通用loading,漂亮实用的页面loading(加载)封装代码
要做一个异步登录,打算给用户做一点提示,所以就网上找了点代码,自己修改新增了一些,做了一个html+css+js的功能封装,以备未来直接使用. html 正在登陆 css /*缓冲提示条 start* ...
仿华为手机管家“一键优化”Loading加载框
仿华为手机管家"一键优化"Loading加载框最近公司项目版本通过了没事做,闲来无聊学习下自定义view知识.偶尔看到华为手机上面的手机管家应用上面的loading图,于是想模仿 ...
vue element-ui Loading加载事件的使用以及自定义Loading加载动画
elemen-ui官方使用 <el-tablev-loading="loading"element-loading-text="拼命加载中"element ...
css动画----loading加载动画
今天做项目的时候,一个loading加载动画,让我搞了很长时间,后来ui给了看了一个loading加载源码,仿照着源码,把样式改了一下,成功了,并且通过ui给的链接,发现里面有很多优秀的源码可以借鉴, ...
2款不同样式的CSS3 Loading加载动画附源码
原文:2款不同样式的CSS3 Loading加载动画附源码我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
loading加载和layer.js
layer.js中的loading加载 l本篇主要介绍layerjs中的loading加载在实际项目中的应用 1.使用的技术前端:HTML5+CSS3+JS+layer.js 后端:.net 2. ...
axios请求拦截做Loading加载
axios请求拦截做Loading加载首先安装element-ui ,我们是按需引入从element-ui 引入我们所需: import {Loading,Message} from " ...
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
html间隔代码_HTML+CSS基础入门开发，经典Loading加载缩放动画特效
大家好,本篇文章分享经典Loading加载缩放动画特效,欢迎参考和指正. 效果图: Loading加载缩放动画特效 HTML代码: CSS代码: 知识点: animation:是CSS3的动画属性,这 ...
axios vue 加载效果动画_vue+axios+element ui 实现全局loading加载示例
实现全局loading加载分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单对不对? import axios from 'axios'; imp ...

漂亮实用的loading(加载)封装

漂亮实用的loading(加载)封装相关推荐

最新文章

热门文章