原生JS实现加载进度条

本文分享一个原生JS实现的动态加载进度条特效，效果如下：

实现的代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现加载进度条</title>
    <style>
        #progressBox {
            width: 300px;
            height: 40px;
            border: 1px solid #C8C8C8;
            background: white;
            position: relative;
            margin: 0 auto;
            margin-top: 100px;
        }

        #progressBar {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            height: 40px;
            width: 100%;
            line-height: 40px;
            color: white;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            font-family: Georgia;
            clip: rect(0px, 0, 40px, 0px);
            background: #00A1F5;
        }

        #progressText {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 100%;
            height: 40px;
            line-height: 40px;
            color: black;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            font-family: Georgia;
        }
    </style>
    <script>
        window.onload = function () {
            // 设定当前起始状态值,
            // 真实情况中用html5的onprogress和onload来完成
            // 还可以跟后台配合，通过ajax实时的返回数据
            var iNow = 0;
            // 设定定时器
            var timer = setInterval(function () {
                // 如果当前的值为100
                if (iNow == 100) {
                    // 清除定时器
                    clearInterval(timer);
                }else {
                    // 将当前状态值累加1
                    iNow += 1;
                    // 调用执行状态的函数,传入状态值
                    progressFn(iNow);
                }

            }, 30);

            function progressFn(cent) {
                // 获取最外层的div
                var oDiv1 = document.getElementById('progressBox');
                // 获取内层进度条的div
                var oDiv2 = document.getElementById('progressBar');
                // 获取内层文字发生变化时的div
                var oDiv3 = document.getElementById('progressText');

                // 获取总进度条的宽度
                var allWidth = parseInt(getStyle(oDiv1, 'width'));

                // 设定内层两个div的文字内容一样
                oDiv2.innerHTML = cent + '%';
                oDiv3.innerHTML = cent + '%';

                // 修改clip的的宽度值
                oDiv2.style.clip = 'rect(0px, ' + cent / 100 * allWidth + 'px, 40px, 0px)';

                // 获取当前元素的属性值
                function getStyle(obj, attr) {
                    // 兼容IE
                    if (obj.currentStyle) {
                        return obj.currentStyle[attr];
                    }else {
                        // 第二个参数为false是通用的写法，目的是为了兼容老版本
                        return getComputedStyle(obj, false)[attr];
                    }
                }
            }
        };
    </script>
</head>

<body>
    <div id="progressBox">
        <div id="progressBar">0%</div>
        <!-- 设定第二个层以便当进度超过文字的时候，修改文字的颜色 -->
        <div id="progressText">0%</div>
    </div>
</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS+WCF实现进度条实时监测数据加载量的方法详解

    本文实例讲述了JS+WCF实现进度条实时监测数据加载量的方法.分享给大家供大家参考,具体如下: 背景 由于项目中需要导入大量数据到memcache中 需要用WCF调取11万条数据,由于那边多级联查和排序,所以比较慢(1分钟左右) 同时这边需要对数据进行处理,合并成2万条数据,然后存储,需要一定时间(也是1分钟左右) 总之,完成这个数据导入一共需要1分30秒左右 这时候,需要一个进度条来实时监测完成的数据量 (之前用的是一个动态图,不能知道程序目前的完成量,甚至不知道它是不是卡住了,只能等着) 功

  • js+HTML5 canvas 实现简单的加载条(进度条)功能示例

    js+HTML5 canvas 实现简单的加载条(进度条)功能示例

    本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>www.jb51.net canvas实现加载条动画</title> </head> <body> <canv

  • javascript 实现页面加载进度条代码

    javascript 实现页面加载进度条代码

    New Document 加载中,请耐心等待 '); window.onload = function () { document.getElementById('loadbox').style.display="none"; document.getElementById('imglist').style.display="block"; } // --> 欧文加油! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript实现网页加载进度条代码超简单

    网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行

  • js ajax加载时的进度条代码

    js ajax加载时的进度条代码

    最终效果如下图所示,pc和移动端都可以展示的,调用方法也很简单,开始调用:loading.baosight.showPageLoadingMsg(false),alse代表不现实加载说明,true展示加载说明.调用完成后调用:loading.baosight.hidePageLoadingMsg(),在整个代码里有两个文件,一个是js文件,一个是css文件.切记不要忘记引入jquery.js css文件 #_loadMsg{ display: inline-block; width: 100%;

  • JS实现进度条动态加载特效

    本文实例为大家分享了JS实现进度条动态加载的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>进度条</title> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"

  • 简单实现js进度条加载效果

    本文实例为大家分享了js进度条加载效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下载进度</title> <style> /*定义父容器*/ .content{ width: 500px; height: 200px; background: pin

  • pace.js页面加载进度条插件

    pace.js页面加载进度条插件

    本文简单介绍插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容IE8以上的所有主流插件,而且其强大之处在于,你还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约.闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果),如果你擅长修改css动画,那你就可以做出无限种可能性的动画,为你的网站增添个性化特色! 调用方法: 引入Pace.j

  • 浅析JS异步加载进度条

    浅析JS异步加载进度条

    展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1.当用户点击load button执行异步请求. 调用方法 出现加载条 2.怎么实现进度条呢? 1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index = 999. 加载的时候让用户无法修改界面值 2) 在document.body 新增一个动态的div. 代码实现: Main.html: <!DOCTYPE html> <html>

  • jquery插件NProgress.js制作网页加载进度条

    NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Google, YouTube, 和 Medium 提供灵感. 安装 依赖于 jQuery (1.8版本及以上),添加 np

随机推荐