网页进度条

网页进度条
千次阅读

2017-09-22 21:23:34

一个很简单的进度条

用一个简单的css属性就能实现：cilp

clip：rect(top,right,bottom,left)

先写一个小程序来解释

<style>
        .box {
            width: 200px;
            height: 20px;
            background:#ccc;
            border-radius:10px;
            position:relative
        }

        .clip {
            position: absolute;
            width: 100%;
            height: 100%;
            clip: rect(0px,100px,20px,0px);
            background: red;
            border-radius:10px;
        }
    </style>

<div class='box'>

    <span class='clip'></span>

</div>

显示效果：

给.clip加上position：absolute；width：100%；height：100%；相对于在box里加上一个一样宽高的盒子，背景为红色；

rect(top,right,bottom,left)，相对于控制这个盒子显示的面积，通过改变距离right的值，使显示的面积变大

更多相关内容
swift版webview加载网页进度条效果
2020-08-28 22:11:45

主要为大家详细介绍了swift实现webview加载网页进度条效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收起
javascript 网页进度条简单实例
2020-12-29 05:34:51

javascript 网页进度条简单实例最近学习新的知识，遇到一个小功能网页进度条，发现一篇文章还是不错的，这里记录下，也许能帮助到大家，实例代码： <!DOCTYPE html> <html> <head> <style>...

收起
利用js编写网页进度条效果
2020-11-29 02:24:23

为了让我们编写的网页进度条满足现有需求，又足够轻便，所以使用原生js写一个构造函数，为了见名知义，可以把该函数命名为”Loading”。该函数接收2个参数，分别为arr、callback。其中arr定义图片数组，callback定义...

收起
yii2-pace-widget:用于自动网页进度条的 Yii2 小部件
2021-06-19 18:31:54

Yii2 配速小部件一个基于 javascript 库的用于自动网页进度条的 Yii2 小部件。佩斯做什么？ Pace 将自动监控您的 ajax 请求、事件循环延迟、文档就绪状态和页面上的元素以决定进度。在 ajax 导航上，它将重新开始！...

收起

PHP
加载网页进度条
2021-04-01 11:49:40

加载网页进度条

收起

android源码
Android 加载网页进度条.zip
2021-12-16 15:12:02

Android 加载网页进度条.zip

收起
jquery+css3网页进度条加载特效
2020-06-10 13:11:40

这是一款扁平化风格的jquery+css3实现的网页加载进度条特效。

收起

jquery特效
Android应用源码之加载网页进度条.zip
2021-10-14 22:52:13

Android应用源码之加载网页进度条.zip

收起
安卓开发-加载网页进度条.zip
2021-11-18 11:31:49

安卓开发-加载网页进度条.zip

收起
Android参考源码-加载网页进度条.zip
2022-03-08 21:35:53

源码参考，欢迎下载

收起

android
安卓Android源码——加载网页进度条.zip
2021-10-14 08:58:58

安卓Android源码——加载网页进度条.zip

收起
Android应用源码之加载网页进度条-IT计算机-毕业设计.zip
2022-04-06 21:58:29

Android应用源码开发Demo，主要用于毕业设计学习。

收起
网页进度条研究
2021-10-24 13:33:38
有些场景需要使用到进度条，在以前基本都是通过div组合实现的，实现起来不难但是有点繁琐。在h5推出后里面有个progress标签就是解决进度条问题的，实现起来非常简单。 <progress value="85" max="100"> ...
有些场景需要使用到进度条，在以前基本都是通过div组合实现的，实现起来不难但是有点繁琐。

在h5推出后里面有个progress标签就是解决进度条问题的，实现起来非常简单。
```
<progress value="85" max="100">
```
效果如下：

用法和样式都很简单，要更好的展示，比如中间或者末尾带数字或者改变颜色大小等样式还是得自己额外写代码实现。本来想自己写的，但是发现不少框架都有。懒得自己写了，直接列一下吧。

1.拼图（pintuer）框架

里面提供了两种方式。分别是对h5标签渲染和自己用div实现。参考：拼图开发文档-元件-进度条

（1）对原生的h5标签进行渲染

（2）通过div来实现

2.layui框架

layui是通过两个div来实现的。参考：进度条 - 页面元素 - Layui

3.vant框架

本质一样，通过div配合span实现的。参考：Vant - Mobile UI Components built on Vue

此外还有圆环进度条。目前搜集到了两个。

1.pintuer拼图圆环。是通过div实现的。参考：拼图开发文档-元件-圆环

2.vant圆环进度条。是通过svg实现的。参考：Vant - Mobile UI Components built on Vue
收起
展开全文
css3 canvas粒子动画的网页进度条Laoding特效.rar
2019-07-10 18:00:04

html5 css3 canvas粒子动画的网页进度条Laoding特效，虽然看上去挺简单，不过从开始创意到制作完成，还真的挺麻烦，从代码量就能看出，可能我水平有限吧，写的有些繁琐，不过效果我是相当满意的，粒子像素效果还是挺...

收起
JavaScript实现网页加载进度条代码超简单
2021-01-19 15:08:00

网页进度条能够更好的反应当前网页的加载进度情况，loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是目前的浏览器并没有提供页面加载进度方面的接口，也就是说页面还无法准确返回页面实际加载...

收起

常见的几种网页进度条及如何判断页面已经加载完毕

万次阅读 2018-09-15 03:48:17

很low的方法——直接使用定时器常见的网页进度条1 使用定时器的方法（不会判断页面加载，只是在定时器完成之后将也面显示出来） ** 这种方法是直接给一个时间，等结束以后，加载效果...

首先推荐一个自动生成gif图标的一个网址：preloaders.net
这里写图片描述
在里面挑选好加载的效果图以后，点击下载：

下载完成以后把gif图片保存到你项目的img文件夹中，方便使用。
**

loading方法

1.很low的方法——直接使用定时器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常见的网页进度条1</title>
	<style>
		.loading{
			width: 100%;
			height: 100%;
			position: fixed;
			top:0;
			left: 0;
			z-index: 100;
			background-color: #fff;
		}
		.loading .pic{
			width: 64px;
			height: 64px;
			background:url(images/loading.gif);
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}
	</style>
	<script src="js/jquery-1.11.3.js"></script>
	<script>
		$(function () {
			//可使用jquery动态添加遮罩及loading效果
			// var loading = '<div class="loading"><div class="pic"></div></div>';
			//$("body").append(loading);
			//启动一个定时器
			setInterval(function(){
				$(".loading").fadeOut();//3秒之后影藏
			},3000)
		})
	</script>
</head>
<body>
	<div class="loading">
		<div class="pic"></div>
	</div>
	<p>使用定时器的方法（不会判断页面加载，只是在定时器完成之后将也面显示出来）</p>
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779145193&di=88f99c68903b47c4e386755b73893335&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1212%2F21%2Fc2%2F16781720_1356079420979.jpg" alt=""/>
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779184701&di=f3ab80235c5ddf5adb9d6b06ce47e82c&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110730%2F110730052814920f360299a915.jpg" alt="">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779211730&di=4c244c8bd60f74b1832625e27c063fc0&imgtype=0&src=http%3A%2F%2Fi3.download.fd.pchome.net%2Ft_960x600%2Fg1%2FM00%2F09%2F12%2FoYYBAFO6NYCIE0tSAAdYOvon7RoAABtkwF4hgIAB1hS650.jpg" alt="">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779225935&di=4c13b2276bbe03877d4c5ea0cc56cc98&imgtype=0&src=http%3A%2F%2Fc15.eoemarket.net%2Fapp0%2F652%2F652549%2Fscreen%2F3260012.png" alt="">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779271901&di=3ccda1af260cf969189de3f52ea31686&imgtype=0&src=http%3A%2F%2Fpic1.ytqmx.com%3A82%2F2015%2F0526%2F14%2F02.jpg%2521720.jpg" alt="">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779311038&di=0599243d4fe87313ed37ee416cd73d6a&imgtype=0&src=http%3A%2F%2Fwww.desktx.cc%2Fd%2Ffile%2Fwallpaper%2Fscenery%2F20170105%2F2647448be73294d17c28d91407661f8c.jpg" alt="">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779320074&di=ec9d10c18c21daec3b89b5573c22ef0f&imgtype=0&src=http%3A%2F%2Fpicture.ik123.com%2Fuploads%2Fallimg%2F170320%2F3-1F320150H5.jpg" alt="">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536779349967&di=11eaaee20a3da68abf58938bdad012e0&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-11-29%2F5a1e13119deee.jpg" alt="">
</body>
</html>

**
这种方法是直接给一个时间，等结束以后，加载效果消失。但是这种方法并不能判断页面是否已经加载完毕，虽然简单粗暴，但显然这并不是我们想要的结果；

2.根据页面是否加载完毕来关闭loading效果：
首先，咱们要想知道页面是否加载完毕，需要知道以下几点：
1.document.onreadystatechange 页面加载状态改变时的事件
2.document.readyState 页面当前文档的状态
1）.uninitialized 还未开始载入
2）.loading 载入中
3）.interactive 已加载，文档和永和可以开始交互
4）.complete 载入完成
这里我们就不使用定时器的那种方法了，我们直接来判断页面是否加载完毕去决定loading效果的关闭与否，那么直接将第一个方法的js改为：

document.onreadystatechange = function () {//即在加载的过程中执行下面的代码
	if(document.readyState=="complete"){//complete加载完成
		$(".loading").fadeOut();
	}
}

这种方法是咱们用到的最多的方法了，因为它能判断出来页面是否真的已经加载完毕。

3.用C3做进度条的效果
这个就要用transform属性以及animation动画了，上面两个方法里，都是用的gif图，那么这样一个加载的效果我们用C3怎么去实现呢？
这里写图片描述
说下大概思路吧，首先你肯定得写一个容器把进度条装进去：

<div class="loading">
	<div class="pic">
		<i></i>
		<i></i>
		<i></i>
		<i></i>
		<i></i>
	</div>
</div>

然后再修改样式：

.loading{width: 100%;height: 100%;position: fixed;top:0;left: 0;z-index: 100;background-color: #fff;}
.loading .pic{width: 50px;height: 50px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}
.loading .pic i{display: block;float: left;width: 6px;height: 50px;background-color: #399;margin: 0 2px;transform: scaleY(.4);animation: load 1.2s infinite;
}
.loading .pic i:nth-child(1){}
.loading .pic i:nth-child(2){animation-delay: .1s; }
.loading .pic i:nth-child(3){animation-delay: .2s;}
.loading .pic i:nth-child(4){animation-delay: .3s;}
.loading .pic i:nth-child(5){animation-delay: .4s;}
@keyframes load{
	0%,40%,100%{transform: scaleY(.4);}
	20%{transform: scaleY(1);}
}

写好这些以后，动画就已经产生了。
再下来将第二种方法的js粘贴过来，就达到了用CSS3来实现页面加载的一个动画效果了。

4.还有一种加载方式时，实时获取加载数据，就是百分数的那种效果，比如这样：
这里写图片描述
这种效果在页面中也比较常见，也是用css3做的，代码如下：
首先，先给一个容器用来装进度条：

<div class="loading">
	<div class="pic">
		<span></span>
		<b>0%</b>
	</div>
</div>

然后写对应的样式及动画：

*{
		margin:0;
		padding: 0;
	}
	.loading{width: 100%;height: 100%;position: fixed;top:0;left: 0;z-index: 100;background-color: #fff;}
	.loading .pic{width: 100px;height: 100px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;font-size: 30px;text-align: center;line-height: 100px;}
	.loading .pic span{display: block;width: 80px;height: 80px;position: absolute;top: 10px;left: 10px;border-radius: 50%;box-shadow: 0 3px 0 #666;animation: rotate 1s infinite linear;-webkit-animation: rotate 1s infinite linear;
	}
	@-webkit-keyframes rotate{
		0%{-webkit-transform: rotate(0deg);}
		100%{-webkit-transform: rotate(360deg);}
	}
	@keyframes rotate{
		100%{transform: rotate(360deg);}
	}；

那么现在打开浏览器以后呈现在眼前的是一个单调的转圈的动画，所以接下来我们还得写js：

$(function () {
	var img = $("img");//首先获取所有的Img对象
	var num = 0;//定义一个变量，赋值给b标签用
	img.each(function(i){//遍历获取到的所有img
		var oImg = new Image();//new一个新对象
		oImg.onload = function(){//使用onload方法，在加载完成后执行
			oImg.onload = null;//首先清除掉缓存
			num++;//每次加载的过程中num++，即执行次数
			$(".loading b").html(parseInt(num/$("img").size()*100)+"%");//改变b标签的内容，用num除以img的个数，再乘以100，再取整，这就是加载的百分数
				if(num >= i){
					$(".loading").fadeOut();//当num的值大于等于个数时隐藏
				}
			}
			oImg.src = img[i].src;//预加载，先指定一个img.src，当onload成功以后可以将数据指定到某一个元素或者图片上，或者返回一个结果
		})
	})

OK，完成（一定记得要引jQuery，当然用原生就不用引了）。

公众号：Coder 杂谈，欢迎关注
在这里插入图片描述

收起

展开全文

vue中使用网页进度条

千次阅读 2018-03-12 17:56:05

转载：...NProgress.js和nanobar.js是两款轻量级的进度条组件，使用简便。轩枫阁用过Nprogress，用于页面刚打开时的页面加...

转载：http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html

前言

进度条库是前端中常见的库之一，bootstrap中提供了多种进度条样式。NProgress.js和nanobar.js是两款轻量级的进度条组件，使用简便。轩枫阁用过Nprogress，用于页面刚打开时的页面加载进度显示。

官网

NProgress.js：http://ricostacruz.com/nprogress/

nanobar.js：http://nanobar.micronube.com/

1. NProgress

简介

轻量级的ajax进度条应用，灵感来自Google, YouTube, and Medium。

纳米级的进度条。具有逼真的动画涓涓细流来说服你的用户，something is happen！

安装

引入nprogress.js和nprogress.css到项目中。

基本用法

只需要调用start() 和 done()来控制进度条

高级用法

百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1。

   
        1
       
        2
       
        3
       
        NProgress
        .
        set
        (
        0.0
        )
        ;
             
        // Sorta same as .start()
       
        NProgress
        .
        set
        (
        0.4
        )
        ;
       
        NProgress
        .
        set
        (
        1.0
        )
        ;
             
        // Sorta same as .done()

递增：要让进度条增加，只要调用 .inc()。这会产生一个随机增量，但不会让进度条达到100%。此函数适用于图片加载或其他类似的文件加载。

强制完成：通过传递 true 参数给done()，使进度条满格，即使它没有被显示。

配置

minimum：设置最低百分比

   
        1
       
        NProgress
        .
        configure
        (
        {
        minimum
        :
        0.1
        }
        )
        ;

template：改变进度条的HTML结构。为保证进度条能正常工作，需要元素拥有role=’bar’属性。

   
        1
       
        2
       
        3
       
        NProgress
        .
        configure
        (
        {
       
        template
        :
        "<div class='....'>...</div>"
       
        }
        )
        ;

ease：调整动画设置，ease可传递CSS3缓冲动画字符串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed为动画速度（单位ms）。

demo--》vue/

1、cnpm i nprogress --save

2、在main.js中输入：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({ease:'ease',speed:500});
router.beforeEach((to, from, next) => {
	if(to.path == '/') {
		sessionStorage.clear();
	}	
	NProgress.start();
	next()
});
router.afterEach(transition => {
	NProgress.done();
});

3、具体页面具体逻辑接口里面再调相应的nprogress接口

2. nanobar

简介

非常非常轻量级的进度条，压缩过后仅有730字节。不需要引入jQuery。

兼容性：IE8和the rest of the world

安装

通过安装包管理器安装：

Bower:

   
        1
       
        $
        bower 
        install 
        nanobar

npm:

   
        1
       
        $
        npm 
        install 
        nanobar

使用

在项目中引入nanobar.js即可。

   
        1
       
        <
        script 
        src
        =
        "path/to/nanobar.js"
        >
        <
        /
        script
        >

进度创建

   
        1
       
        var
        nanobar
        =
        new
        Nanobar
        (
        options
        )
        ;

参数

bg <String>：（可选）CSS背景颜色属性，默认为”#000″即黑色。

id <String>：（可选）nanobar的div的id

target <DOM Element>：设置防止进度条HTML代码的位置，若target为空则会固定到document的顶部位置。

进度运动

nanobar.go(percentage)：调整进度

percentage <Number>：nonabar的百分比，取值为0-100

例子

   
        1
       
        2
       
        3
       
        4
       
        5
       
        6
       
        7
       
        8
       
        9
       
        10
       
        11
       
        12
       
        13
       
        14
       
        15
       
        var
        options
        =
        {
       
        bg
        :
        '#acf'
        ,
       
        // leave target blank for global nanobar
       
        target
        :
        document
        .
        getElementById
        (
        'myDivId'
        )
        ,
       
        // id for new nanobar
       
        id
        :
        'mynano'
       
        }
        ;
       
        var
        nanobar
        =
        new
        Nanobar
        (
        options
        )
        ;
       
        //move bar
       
        nanobar
        .
        go
        (
        30
        )
        ;
        // size bar 30%
       
        // Finish progress bar
       
        nanobar
        .
        go
        (
        100
        )
        ;

Bootstrap进度条组件

CSS样式：http://v3.bootcss.com/components/#progress-animated

收起

展开全文

网页进度条
2008-04-26 20:45:15

很漂亮的网页进度条。

收起
Android加载网页进度条
2019-10-04 01:12:04

实现的效果：标题栏显示网页标题并且滚动，并且用进度条显示网页的加载进度(重新自定义标题栏，lephone修改后的都带有一个返回按钮，并且标题文本和进度条是Frame布局的不怎么好看)。　1、首先定义一个...

收起
js实现网页进度条效果
2021-10-18 13:41:35

进度条效果在网站中很常见，比如首次打开一个网站的时候，会显示一个进度条，加载完成后，显示网页的内容。这里直接附上实现代码 ✨html 部分 <!DOCTYPE html> <html lang="en"> <head> <...

收起

html css javascript
jsp网页进度条（两种形式的例子）
2009-02-25 09:50:06

一个关于jsp的网页进度条，两种上传形式，仅供参考

收起

swift版webview加载网页进度条效果

javascript 网页进度条简单实例

利用js编写网页进度条效果

yii2-pace-widget:用于自动网页进度条的 Yii2 小部件

加载网页进度条

Android 加载网页进度条.zip

jquery+css3网页进度条加载特效

Android应用源码之加载网页进度条.zip

安卓开发-加载网页进度条.zip

Android参考源码-加载网页进度条.zip

安卓Android源码——加载网页进度条.zip

Android应用源码之加载网页进度条-IT计算机-毕业设计.zip