【转载】关于网页载入，页面顶部显示页面加载线性进度条效果实现。

最新推荐文章于 2023-04-23 22:32:52 发布
最新推荐文章于 2023-04-23 22:32:52 发布
阅读量311 收藏
点赞数
分类专栏： vue 文章标签： vue
原文链接：https://blog.csdn.net/CodingNoob/article/details/77915236
版权

今早早逛淘宝的时候突然发现淘宝每次在点击进入下页的时候的页面顶部就会出现页面载入进度效果，其实之前在访问好多国外的网站的时候也见过这样的效果，突然一时兴起想要知道如何实现。

如图所示：
在这里插入图片描述
然后就百度一下，竟然找到了两款插件，。

插件一：LoadingBar

LoadingBar.js的地址是：http://www.onextrapixel.com/2013/09/02/loadingbar-js-adding-a-youtube-like-loading-bar-to-your-website/

插件二：NProgress.js
NProgress.js的地址是：http://ricostacruz.com/nprogress/

这里只介绍NProgress.js调用方法，第一个自己去琢磨吧。

在这里插入图片描述
根据英文翻译（英语水平太渣翻译不对见谅）：

第一个方法是开始进度
第二个方法是设置百分比
第三个方法是设置增量
第四个方法是结束进度

具体调用demo：

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>NProgress: slim progress bars in JavaScript</title>
  <link href='support/style.css' rel='stylesheet' />
  <link href='nprogress.css' rel='stylesheet' />
  <meta name="viewport" content="width=device-width">  
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>

<body>

</body>
</html>
<script src='nprogress.js'></script>
<script>
    NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
 </script>

这里要注意的时候

<script>
    NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
 </script>

这里代码一定要放到底部执行，切在引入NProgress脚本后，如果放到header里面则不会得到想要的效果。一开始我也陷入坑里面了。

运行效果如下：

Wyliss
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html添加顶部加载进度条,实现网页顶部加载条loading.html
weixin_39612733的博客
06-05 1482
var NexT = window.NexT || {};var CONFIG = {root: '/',scheme: 'Mist',sidebar: {"position":"left","display":"always","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},fan...
网页顶部加载进度条实现
xiaoshihoukeshuaiL的博客
08-30 4963
下面就是简单点实现了这个功能，不同的是进度条颜色不同。 js代码：   $({property: 0}).animate({property: 100}, { duration: 5000,//进度条加载进度的速度 step: function() { var percentage = Math.round(this.property); ...
html添加顶部加载进度条,wordpress主题页面实现顶部加载进度条详细教程
weixin_42364609的博客
06-05 409
页面加载的进度条效果相信大家都仰慕已久！下面是由疯狂的大叔编写的顶部加载进度条的详细教程，简简单单，就可实现酷炫的页面加载进度条效果！顶部加载进度条的实现，大叔第一时间能想到的就是css3了，但是可能对IE低版本的浏览器兼容性不好了，但是玩wordpress的，都无视IE了哈，那么，下面我就直接说教程吧，简单粗暴，css3+JQ了辣。CSS代码body{margin:0;}#progress {p...
实现页面顶部加载的线性进度条
weixin_30700099的博客
08-01 167
没有真实数据模拟，也没用过，只是对其原理感兴趣，自己也做了一个。 1.纯css实现 <style> #loading{ height: 4px; position: fixed; top: 0; z-index: 9999; background...
html table 加载进度条,基于jQuery替换table中的内容并显示进度条的代码
weixin_39601929的博客
06-05 376
效果图如下：http://jialiren.sinaapp.com/jdt/Html代码如下：进度条列序号进度条进度备注其他1 20 20 进度太慢了工作一2 30 30 加油任务二3 80 80 加油！！任务三 4 80 80 加油！！任务三我的目的是把第二列的数值替换成条状图，asp.net girdview 控件生成的也是table标签，因此后面的脚本对gridview的数据呈现也起作用。我...
jQuery 页面载入进度条实现代码
10-30
页面 Loading 条基本人人都会用。它的原理很简单：在页头放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。
JS实现页面载入时随机显示图片效果
10-21
主要介绍了JS实现页面载入时随机显示图片效果,涉及javascript基于随机数与数组的页面元素动态修改相关操作技巧,需要的朋友可以参考下
vue页面加载时的进度条功能(实例代码)
10-15
主要介绍了vue页面加载时的进度条功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue实现设置载入动画和初始化页面动画效果
10-16
今天小编就为大家分享一篇vue实现设置载入动画和初始化页面动画效果，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html在线加载修改,网页顶部真实的加载进度条，不需要手动修改 Html 代码
weixin_39608748的博客
06-02 354
网页顶部真实的加载进度条，不需要手动修改 Html 代码发布时间：2018-05-11作者：laosun阅读(2798)网页顶部真实的加载进度条和右上角三角形真实加载进度，不需要手动修改 Html 代码(真实加载进度)在页面中引入Pace.js，页面就会自动监测你的请求(包括Ajax请求)，在事件循环滞后，会在页面记录加载的状态以及进度情况。此插件的兼容性很好，可以兼容IE8以上的所有主流插件，而...
html 资源加载进度,loading动态加载进度条 div css进度条模板代码资源
weixin_31830389的博客
05-31 586
无法在这个位置找到： /templets/default/think201610/bodys.htm用于网页的动态加载进度条，采用div css js布局，兼容各大浏览器能看见进度条走动一步步加载完成的动态进度条模板代码。进度条特点：模拟一步步加载的进度条，动态加载进度条，loading动态加载改变的进度条。一、在线与代码1、在线演示设置50% 模拟loading点击按钮可以看到效果，程序员根...
关于网页头部进度条的加载效果实现
qq_36202069的博客
01-10 910
目前为止，好像并不能判断根据真实的加载资源返回进度，我们可以通过浏览器加载到文档的哪个部分来模拟获取真实进度  第一步：引入jquery html区： 页头部分 $('.loading').animate({'width':'33%'},50); //第一个进度节点 左侧内容 $('.loading').animate({'width':'
页面实现加载进度条
小雪的博客
09-29 3146
页面实现进度条的完整代码实现
常用的网页加载进度条之【定位在头部的进度条】
WJM_Aunt
09-28 934
常用的网页加载进度条之【定位在头部的进度条】
页面加载顶部进度条的实现NProgress
qq_46376192的博客
02-04 219
页面加载顶部进度条的实现NProgress
JavaScript实现浏览器顶部的进度显示条
Picking_up_stones的博客
08-02 3064
后来打开很多网页在导航栏顶部都有一个进度显示条，就在想如何显示进度呢？那样的JS要如何写？如何知道网页加载到哪了呢？就上网搜了下如何实现，发现实现的思路很巧妙，今天来简单的总结下。一. 原理原理特别简单，我想知道浏览器是如何解析并渲染网页的都知道，HTML文档的代码是按照出现的顺序，从上往下一条一条的执行的。所以我们就可以根据网页代码执行的顺序在合适的位置加上JS代码，去控制进度条的长度变化就可以了
vue中页面加载顶部进度条效果的实现
派大星的博客
11-30 1572
vue中页面加载顶部进度条效果的实现 npm install --save nprogress 然后在main.js引入nprogress import NProgress from ‘nprogress’ import ‘nprogress/nprogress.css’ 在main.js配置 NProgress.configure({ easing: ‘ease’, // 动画方式 speed: 600, // 递增进度条的速度 showSpinner: true, // 是否显示加载ico
关于网页载入，页面顶部显示页面加载线性进度条效果实现。
CodingNoob
09-09 6143
今早早逛淘宝的时候突然发现淘宝每次在点击进入下页的时候的页面顶部就会出现页面载入进度效果，其实之前在访问好多国外的网站的时候也见过这样的效果，突然一时兴起想要知道如何实现。如图所示：然后就百度一下，竟然找到了两款插件，。插件一：LoadingBarLoadingBar.js的地址是：http://www.onextrapixel.com/2013/09/02/loadingbar-js-adding
如何让普通网站页面跳转时显示加载进度条？
乐特的博客
04-23 949
有没有人注意到 GitHub 和 YouTube 这些网站在页面跳转时，网页顶部总是会显示一个加载进度条？ 传统的普通网站(指点击链接后页面跳转会刷新页面)如何实现网页加载进度条？ 比如: GitHub: 点击进入某个仓库，或者进入某个项目的文件夹时屏幕顶部总是会显示一个加载进度条，并且页面不会刷新 YouTube: 点击观看某个视频时，屏幕顶部总是会显示一个加载进度条，并且页面不会刷新
用JavaFX开发游戏，如何在载入页面时计算资源加载进度，并显示进度？
最新发布
05-28
可以使用JavaFX提供的ProgressBar控件来实现进度条的显示。具体实现步骤如下： 1. 在你的载入页面中，创建一个ProgressBar控件，并将其添加到场景图中。 2. 在程序中，将需要加载的资源按照一定的顺序分别加载，并在加载每个资源时更新ProgressBar的进度。 3. 计算进度的方法为：将已加载资源的大小之和除以总资源大小。可以通过获取资源文件的大小来计算总资源大小。 4. 在加载完所有资源后，将ProgressBar的进度设为1（即100%），表示资源已全部加载完毕。 以下是一个简单的代码示例，用于演示如何在JavaFX中实现资源加载进度的计算和显示： ``` import javafx.application.Application; import javafx.concurrent.Task; import javafx.scene.Scene; import javafx.scene.control.ProgressBar; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class ResourceLoadingProgressBar extends Application { private static final int TOTAL_RESOURCES = 100; // 假设需要加载的总资源数为100 @Override public void start(Stage primaryStage) throws Exception { // 创建一个ProgressBar控件 ProgressBar progressBar = new ProgressBar(); progressBar.setPrefWidth(300); // 创建一个加载资源的任务，并在任务执行过程中更新ProgressBar的进度 Task<Void> loadingTask = new Task<Void>() { @Override protected Void call() throws Exception { int loadedResources = 0; for (int i = 0; i < TOTAL_RESOURCES; i++) { // 模拟加载每个资源需要的时间 Thread.sleep(50); // 更新ProgressBar的进度 updateProgress(++loadedResources, TOTAL_RESOURCES); } return null; } }; // 将ProgressBar的进度和任务的进度绑定在一起 progressBar.progressProperty().bind(loadingTask.progressProperty()); // 创建一个场景，将ProgressBar添加到场景中 StackPane root = new StackPane(progressBar); Scene scene = new Scene(root, 400, 300); // 将场景显示在舞台上 primaryStage.setScene(scene); primaryStage.show(); // 启动任务 new Thread(loadingTask).start(); } public static void main(String[] args) { launch(args); } } ``` 在这个示例中，我们创建了一个ProgressBar控件，并将其添加到了场景中。然后，我们创建了一个加载资源的任务，这个任务模拟了加载每个资源需要的时间。在任务执行过程中，我们通过updateProgress方法更新了ProgressBar的进度。最后，我们将ProgressBar的进度和任务的进度绑定在一起，从而实现了进度条的实时显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值