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

     2023-02-23     250

关键词:

【中文标题】如何使用 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');


            

        

    )

【讨论】:

Objective-C,如何显示确定的进度条?

】Objective-C,如何显示确定的进度条?【英文标题】:Objective-C,howtodisplaydeterminateprogressbar?【发布时间】:2012-06-0423:04:46【问题描述】:我想在我的应用程序中将进度条显示为确定的而不是不确定的。但是在将其设置为确定时它... 查看详情

前台服务 - 设置不确定的进度条

...essbar【发布时间】:2021-12-2505:56:04【问题描述】:我正在使用indeterminateprogressbar创建前台服务。publicNotificationcreateNotification()NotificationCompat.Builderbuilder=newNoti 查看详情

不确定的进度条何时进入 Android 支持库

...时间】:2016-02-0708:38:41【问题描述】:我的应用程序UI是使用Android支持库构建的,但目前没有我的应用程序真正需要的(中间)进度条的AppCompat版本。我宁愿不使用任何第三方库来实现材料设计进度条,所以我想知道是否有人知... 查看详情

在 RecyclerView 网格中放置一个不确定的进度条作为页脚

...ecyclerViewgrid【发布时间】:2015-01-1814:24:58【问题描述】:如何在网格RecycleView中为“向上滚动以加载更多”获取不确定的圆形指示器?此处描述了该模式:http://www.google.com/design/spec/component 查看详情

进度条与拖动条的使用学习(代码片段)

(一)进度条常用属性详解:android:max:进度条的最大值android:progress:进度条已完成进度值android:progressDrawable:设置轨道对应的Drawable对象android:indeterminate:如果设置成true,则进度条不精确显示进度android:indeterminateDrawable:设置... 查看详情

操作栏上不确定的进度条上的空指针异常

...间】:2015-09-2206:02:44【问题描述】:所以我开始创建一个使用jsoup来废弃股票数据的应用程序。当我通过导航抽屉从家庭活动移动到“股票”活动时,我需要生成的活动显示第一个片段(viewpager中的recyclerview),它会抓取并列出... 查看详情

纯css使用线性渐变实现滚动进度条

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie 查看详情

delphixeandroid更改progressbar1进度条颜色

...模式下,进度条显示循环动画。这种模式常用于应用程序使用任务的长度是未知的。2、XML重要属性    android:progressBarStyle:默认进度条样式    android:progressBarStyleHorizontal:水平样式 3重要方法    getMax():返回... 查看详情

android怎么自定义绘制如下图中这种进度条

...模式下,进度条显示循环动画。这种模式常用于应用程序使用任务的长度是未知的。2、XML重要属性    android:progressBarStyle:默认进度条样式    android:progressBarStyleHorizontal:水平样式 3重要方法    getMax():返回这... 查看详情

如何更新异步任务中的进度条

】如何更新异步任务中的进度条【英文标题】:HowtoupdateprogressbarinAsyncTask【发布时间】:2014-11-1607:46:40【问题描述】:我正在为android构建一个简单的备份应用程序,此代码读取手机内存中的所有消息并将其存储到一个csv文件中... 查看详情

使用请求通过 http 下载文件时的进度条

...描述】:我需要下载一个相当大的(~200MB)文件。我想出了如何使用here下载和保存文件。最好有一个进度条来知道已经下载了多少。我找到了ProgressBar,但我不确定如何将两者结合在一起。这是我尝试过的代码,但它不起作用。bar 查看详情

如何在 android 中创建进度条而不使用 xml 文件中的进度条小部件?

】如何在android中创建进度条而不使用xml文件中的进度条小部件?【英文标题】:Howtocreateprogressbarinandroidwithoutusingprogressbarwidgetinxmlfile?【发布时间】:2021-07-0705:09:05【问题描述】:我想在我的应用中做一些新的事情。我想在android... 查看详情

在所有元素顶部显示全屏不确定进度条[重复]

】在所有元素顶部显示全屏不确定进度条[重复]【英文标题】:Showingfullscreenindeterminateprogressbarontopofallelements[duplicate]【发布时间】:2014-12-1416:51:51【问题描述】:我想在所有屏幕元素的顶部显示一个全屏的不确定进度条。我的用... 查看详情

java示例代码_使不确定的进度条看起来很漂亮

java示例代码_使不确定的进度条看起来很漂亮 查看详情

高级组件——进度条jprogressbar(代码片段)

JProgressBarpro=newJProgressBar();pro.setIndeterminate(boolean);设置不确定性    false,确定的进度条(显示进度,常用)。    true,不确定的进度条(一般用来提示等待,不常用)。两种信息类型:   &n... 查看详情

如何使用界面更新异步任务中的进度条

】如何使用界面更新异步任务中的进度条【英文标题】:HowtoupdatetheProgressBarinAsyncTaskwithinterface【发布时间】:2017-11-2616:18:16【问题描述】:我创建了一个应用程序,其中我使用了Fragment类和另一个Async类来下载两个不同的类现在... 查看详情

如何使用 AFNetworking AFHTTPRequestOperationManager 显示 ProgressBar

】如何使用AFNetworkingAFHTTPRequestOperationManager显示ProgressBar【英文标题】:HowtoshowProgressBarWithAFNetworkingAFHTTPRequestOperationManager【发布时间】:2015-06-2808:28:45【问题描述】:我试图在从url下载JSON时显示进度条。JSON正在正确下载,但我... 查看详情

如何在加载时显示进度条,使用ajax

】如何在加载时显示进度条,使用ajax【英文标题】:Howtoshowprogressbarwhileloading,usingajax【发布时间】:2013-12-0409:21:58【问题描述】:我有一个下拉框。当用户从下拉框中选择一个值时,它会执行查询以从数据库中检索数据,并使... 查看详情