关键词:
NProgress.js
NProgress是基于jquery的,且版本要 >1.8
API:
NProgress.start() — 启动进度条
NProgress.set(0.4) — 将进度设置到具体的百分比位置
NProgress.inc() — 少量增加进度
NProgress.done() — 将进度条标为完成状态
引入:
<link rel="stylesheet" type="text/css" href="css/NProgress.css">
<script src="js/NProgress.js" type="text/javascript"></script><br>//还有jquery要引入进来
使用:
<script>
$(function() {
NProgress.start();
$(window).load(function() {
NProgress.done();
});
</script>
自定义动画样式:
将我们定义的样式写到一个script标签里,这算是一个小技巧吧。
<script type="text" id="myId"><br> <div class="splash card"><br> <p class="lead" style="text-align:center">不要回来,马上走开...</p>
<div class="progress">
<div class="mybar" role="bar">
</div>
</div>
</div><br></script>
这是css
html,body,iframe{
margin: 0;
padding: 0;
}
#nprogress{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #f7f7f7;
z-index: 999;
}
.spinner-icon{
display: none!important;
}
.splash {
position:absolute;
top:40%;
left:0;
right:0;
margin: auto;
}
.splash img {
display: block;
margin-left: auto;
margin-right: auto;
height: 100px;
width: 100px;
}
.card {
background-color: #f7f7f7;
padding: 20px 25px 15px;
margin: 0 auto 25px;
width: 380px;
}
.mybar {
background: #29d;
height:10px;
}
.progress {
height: 10px;
overflow: hidden;
}
js代码变成了这样:
<script type="text/javascript">
$(function(){
NProgress.configure({
template: $(‘#myId‘).html() // template是用来设置动画样式的属性
});
NProgress.start();
});
$(window).load(function(){
NProgress.done();
})
</script>
总结:在js里控制动画什么时候开始,什么时候结束,已及加载的动画样式。
在自定义样式里关键的两个指针就是 role 属性:
role=bar :横向加载条
role=spinner 旋转的小圈
样例2:(省略了css)
<script type="text" id="myId">
<em id="__mceDel"><em id="__mceDel"><div class="bar" role="bar" style="display=block"><br> <div class="peg"></div><br> </div><br> <div class="spinner" role="spinner"><br> <div class="spinner-icon"></div><br> </div></em></em>
</script>
pace.js
API:
-
Pace.start:开始显示进度条,如果你不是使用
AMD
或者Browserify
来加载模块的话,这个会默认执行。 -
Pace.restart:进度条重新加载以及显示。
-
Pace.stop:隐藏进度条以及停止加载。
-
Pace.track:监测一个或者多个请求任务。
-
Pace.ignore:忽略一个或者多个请求任务。
用法:
<head>
<script src="/pace/pace.js"></script>
<link href="/pace/themes/pace-theme-barber-shop.css" rel="external nofollow" rel="stylesheet" /> <br> <!-- 此处的css样式就决定了加载进度动画的样式 -->
</head>
改变动画样式:
pace里已经设计好了许多种加载进度动画,只需要变化css文件就可以了
总结:
pace的优点有直接引入文件就可以了,不需要在自己写任何代码,就自带了加载进度动画,只是有一个缺点,官网提供的加载进度动画都没有遮罩层。
进度条加载
...本要 >1.8 API: NProgress.start() —启动进度条 NProgress.set(0.4) —将进度设置到具体的百分比位置 NProgress.inc() —少量增加进度 NProgress.done() —将进度条标为完成 查看详情
学习|css3实现进度条加载
进度条加载是页面加载时的一种交互效果,这样做的目的是提高用户体验。进度条的的实现分为3大部分:1、页面布局,2、进度条动效,3、何时进度条增加。文件目录加载文件顺序<linkrel="stylesheet/less"href="./index.less"><script... 查看详情
网页加载进度条
...的体验相当不好,所以,一般会在网页加载成功前,会以进度条的形式,给用户进行展示。让用户可以看到动画,知道网页正在加载中) 常见的方式有以下: 1.定时器的进度条(假的) <scripttype="text/javascript"> ... 查看详情
vue----页面加载进度条
参考技术A我测试使用的是脚手架2有的时候当我们页面请求数据较慢的时候,我们就需要让页面有个加载进度条,让用户体验感更加友善 查看详情
显示进度条,直到 UITableView 加载所有 Cell
】显示进度条,直到UITableView加载所有Cell【英文标题】:ShowprogressBaruntilUITableViewloadallCell【发布时间】:2021-11-0605:05:32【问题描述】:我正在使用Swift5构建一个应用程序。我用UITableView创建了一个视图。我需要显示进度条,直到... 查看详情
加载数据并填充到recyclerview时如何显示进度条?
】加载数据并填充到recyclerview时如何显示进度条?【英文标题】:Howtodisplayprogressbarwhileloaddataandfillintorecyclerview?【发布时间】:2018-02-1217:22:33【问题描述】:我想在加载数据和加载完成时在活动中显示进度条,隐藏进度条(GONE... 查看详情
进度条(视频预加载器)
【中文标题】进度条(视频预加载器)【英文标题】:Progress-bar(VideoPreloader)【发布时间】:2011-03-0102:54:48【问题描述】:我有一个显示视频的火花组件VideoDisplay。我想向它添加一个ProgressBar,它将显示视频的加载进度以及视频加... 查看详情
网页加载进度条
1.定时器的进度条 代码:<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>定时器的进度条</title> <!--弊端:无论有没有缓存都要执行规定的事件,不切合实际--> <styl 查看详情
如何重新加载圆形进度条
】如何重新加载圆形进度条【英文标题】:howtoreloadacircularprogressbar【发布时间】:2015-12-0921:59:58【问题描述】:我对画布以及如何创建圆形进度条进行了一些网络搜索,我得到了这个。我对在网上找到的代码片段进行了一些更... 查看详情
如何在加载时加载自定义进度条
】如何在加载时加载自定义进度条【英文标题】:Howtoloadacustomprogressbaratloadingtime【发布时间】:2014-10-2908:09:53【问题描述】:我有一个要求,我需要在初始屏幕上显示进度条/活动指示器,直到我在iOS7中完成数据下载。提前致谢... 查看详情
javaswing圆形加载进度条(代码片段)
css3彩色进度条加载动画带进度百分比
在线演示 本地下载 查看详情
进度条加载
packagecom.baway.a1509a_view.widget;importandroid.content.Context;importandroid.content.res.TypedArray;importandroid.graphics.Canvas;importandroid.graphics.Color;importandroid.graphics.Paint;importand 查看详情
网站加载进度条。
https://preloaders.net/ 判断状态进行操作隐藏页面加载gifhttps://loading.io/ autoprefixer.github.io自动形成兼容写法css的网站。。。。================================================= http 查看详情
像在 WhatsApp 中一样加载多个图像进度条
】像在WhatsApp中一样加载多个图像进度条【英文标题】:MultipleImagesProgressBarloadingLikeinWhatsApp【发布时间】:2015-08-1711:52:27【问题描述】:我想在上传或下载图像或视频时在WhatsApp中显示多个进度条。以及完成的进度条隐藏进度条... 查看详情
css系列创建网页加载进度条
...定时器确定加载所用时间的长短,其实并不是真正的加载进度实现<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>定时器的进度条</ti 查看详情
前端页面加载进度条的制作
...表示,当加载完成的时候,再来显示内容。推荐一个制作进度条的网站icons8.com/preloaders/,制作进入条有以下几种方法。这种方法实现进度条简单粗暴,但是不是真实的。所以开发中一般不用这个。我们通过jquery来实现,这个方... 查看详情
unitywww加载进度条
usingUnityEngine;usingSystem.Collections;publicclasstestProgress:MonoBehaviour{ voidStart(){StartCoroutine(getWWW());}IEnumeratorgetWWW(){WWWwww=newWWW("http://192.168.1.106/app/s01.mp3");stringprogr 查看详情