Loading animation of layui pop-up layer control

Loading animation of layui pop-up layer control

The code is as follows:
call animation: load_pageData();
close animation: layer.close(layer.index) or 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;
}

Guess you like

Origin blog.csdn.net/qq_42208679/article/details/105566165