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

Question

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

问题

虽然圆形动画在屏幕加载时按预期方式工作，但linear indeterminate progress bar直到页面完全加载后才起作用。

我在materialize.js文件中有一个short peek，但是只有在页面完全加载后，我才发现与进度栏“正在激活”相关的任何内容。有办法改变吗？

提前感谢！

Answer 1

圆形和线性不确定预加载器没有附加任何逻辑-它们只是永久地动画，循环播放。由开发人员根据需要显示和隐藏。

这里是您如何在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');


            }

        }

    })
}