如何使用 Materialise 线性不确定进度条作为页面预加载器？

Posted 2023-02-23

【中文标题】如何使用 Materialise 线性不确定进度条作为页面预加载器？

【英文标题】：How to use the Materialize linear indeterminate progress bar as a page preloader?

【发布时间】：2020-05-23 16:36:15

【问题描述】：

我在个人项目中使用Materialize Framework，我想创建一个加载指示器，而不是使用圆形，而是使用线性进度条和动画。

问题

虽然循环动画在屏幕加载时按预期工作，但 linear indeterminate progress bar 在页面完全加载之前不会。

我对 materialize.js 文件进行了简短的查看，但我没有发现任何与仅在页面完全加载时“被激活”的进度条相关的内容。有办法改变吗？

提前致谢！

【参考方案1】：

Circular 和 Linear Indeterminate 预加载器没有附加任何逻辑 - 它们只是动画、循环、永远。开发人员可以根据需要显示和隐藏。

这是一个示例，说明如何在 ajax 调用中使用它们 - 显示调用何时触发，然后在成功时隐藏：

function ajax_function() 

    $('.preloader-wrapper').removeClass('hide');

    $.ajax(

        url : '.../wp-admin/admin-ajax.php',
        type : 'post',
        data : 
            data: mydata

        ,
        error : function( response )      
            // Handle error
        ,
        success : function( response )

            if( response == 0 ) 

                // Handle no response

             else                     

                $('.mydiv').append( response );
                $('.preloader-wrapper').addClass('hide');


            

        

    )