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

Question

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

问题

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

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

提前致谢！

Answer 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');


            }

        }

    })
}