自定义loadding加载

主要就是依靠z-index属性来控制,原理就是在原来的页面上悬浮一层div,并给这个div添加一个加载的动画内容
1、定义一个loadding模块
自定义loadding加载_第1张图片

2、给div添加样式
当div的宽度和高度足够大的时候,下面的一层是不能够进行操作的,加载图标是fontawesome里面的,具体博客会写。
自定义loadding加载_第2张图片

3、调用方法
在开始使用的时候调用ShowWaitDiv() 方法,就会出现加载图标,在自己代码执行完成之后,调用HiddenWaitDiv() 就可以关闭加载图标。
//显示加载数据
function ShowWaitDiv() {
$(“#loading”).show();
}

//隐藏加载数据
function HiddenWaitDiv() {
$(“#loading”).hide();
}

4、效果
其中字体颜色,图标颜色,背景色都是可以自定义的
自定义loadding加载_第3张图片

你可能感兴趣的:(前端特效)