# progressBar

**Repository Path**: bingohello/progressBar

## Basic Information

- **Project Name**: progressBar
- **Description**: 进度条
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2017-11-29
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 常用的网页加载进度条
## 1. 介绍
随着HTML5的普及，各种CSS3动画及JS特效在网页中层出不穷，PC端载入数据的速度还算可以，移动端相对的要慢很多，如果图片或者脚本没有完全载入，用户在操作中可能会发生各种问题，因此我们需要对数据载入进行侦测，以更加人性化的方式给用户展现。

## 2. 网页加载进度条误区
采用定时器来控制进度条的效果，虽然可以适用很多场景，但是准确性欠缺。

		setInterval(function () {
	        $(".loading").fadeOut();
	    }, 3000);
## 3. 通过加载状态事件制作进度条
document.onreadystatechange 页面加载状态改变时的事件

document.readyState  返回当前文档的状态
> 1. uninitialized 还未开始载入
> 2. loading 载入中
> 3. interactive 已加载，文档与用户可以开始交互
> 4. complete 载入完成

		document.onreadystatechange = function () {
            if(document.readyState=="complete"){
                $(".loading").fadeOut();
            }
        }
## 4. CSS进度条小动画
[https://icons8.com/preloaders/](https://icons8.com/preloaders/)

[https://loading.io/](https://loading.io/)

[http://autoprefixer.github.io/](http://autoprefixer.github.io/)

![](https://i.imgur.com/ApyegE8.png)

1.transform：向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

2.animation：

![](https://i.imgur.com/fxVDpbz.png)

3.@keyframes：通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
![](https://i.imgur.com/Bl1cvsW.png)
## 5. 定位在头部的进度条
根据网页自上而下加载的原理，使用animate()方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

语法：
$(selector).animate(styles,speed,easing,callback)
## 6. 实时获取加载数据的进度条
![](https://i.imgur.com/M5FWTZz.png)

1.建立图像对象：

2.事件：onload

3.src属性一定要写到onload后面，否则程序在IE中会出错

	var oImg = new Image();
                
    oImg.onload=function () {
        num++;
        $(".loading b").html(parseInt(num/$("img").size()*100)+"%");
        if(num==img.length){
            $(".loading").fadeOut();
        }
    }
    
    oImg.src=img[i].src;