当前位置:  首页  >  前端开发  >  JavaScript

简单实用的进度条加载组件loader.js

本文提供一个简单的方法实现一个流程的进度条加载效果,以便在页面中可以通过它来更好地反馈耗时任务的完成进度。

这个倒是比较简单,两个div即可,bootstrap官方就提供有多种主题的进度条组件。如果自己要用,参照下别人的代码,写成自己的风格即可,实际上也非常的好理解:

.progress {
    height: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);}.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    position: relative;
    border-radius: 4px;}

第二步,就是该考虑下如何来计算进度。以资源加载为例,如果是客户端,通常我们是有权限去读取资源实际大小的,所以在计算加载进度的时候,只要拿已加载的数据量除以要加载的总的数据量即可;但是在网页端,我们没有这个能力去拿到要加载的资源的大小,所以只能采用一个不那么准确的方案,用已加载的资源个数除以总的资源个数。基于后面的计算方法,我们只需要在每个耗时任务完成的时刻,计算好已完成的任务进度,然后给进度条设置相应的宽度即可。

下面我用定时器模拟了4个同时发起,但是需要不同时间才能完成的异步任务来实现这一步的功能:


    
    Document
    
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有