layui弹出层控件的加载动画

layui弹出层控件的加载动画

代码如下:
调用动画:load_pageData();
关闭动画:layer.close(layer.index) 或 layer.closeAll(‘loading’);

js:

function load_pageData(){
    
    
    layui.use('layer', function(){
    
    
        let layer = layui.layer;
        let index =  layer.load(2,{
    
     //icon支持传入0-2
            shade: [0.4, '#000'], //0.5透明度的灰色背景
            offset: ['40%', '45%'], //位置
            content: '加载中...',
            success: function (layero) {
    
    
                layero.find('.layui-layer-content').css({
    
    
                    'color':'#fff',
                    'padding-top': '78px',
                    'padding-left': '13px',
                    'width': '60px',
                    'font-size':'16px'

                });
            }
        });
    });
}

css:

.layui-layer-ico16, .layui-layer-loading .layui-layer-loading2 {
    
    
    width: 100px !important;
    height: 100px !important;
    /*background: url(loading-2.gif) no-repeat;*/   //layui自带动画效果
    background: url('img/loading_more1.gif') no-repeat !important;   //自己的gif动画路径
    background-size: 80px 80px !important;
}

猜你喜欢

转载自blog.csdn.net/qq_42208679/article/details/105566165