效果：

html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>加载效果</title>

    </head>

    <style>

        .loading {

            position: fixed;

            width: 100%;

            height: 100%;

            top: 0px;

            left: 0px;

            z-index: 999;

            font-size: 20px;

            background-color: #fff;

        }

        .loading.active {

            -webkit-animation: fadeAnim 0.3s forwards ease-in-out;

            animation: fadeAnim 0.3s forwards ease-in-out;

        }

        .load {

            width: 100px;

            height: 100px;

            position: absolute;

            text-align: center;

            top: 40%;

            left: 50%;

            margin-left: -20px;

        }

        .load-text {

            color: #099607;

            font-size: 40px;

            margin-top: 108px;

            display: inline-block;

        }

        .load-cell1,

        .load-cell2 {

            width: 100%;

            height: 100%;

            border-radius: 100px;

            -webkit-border-radius: 100px;

            border: 3px solid #fff;

            background-color: #099607;

            top: 0;

            left: 0;

            opacity: 0.6;

            position: absolute;

            -webkit-animation: bounce 2.0s infinite ease-in-out;

            animation: bounce 2.0s infinite ease-in-out;

        }

        .load-cell2 {

            -webkit-animation-delay: -1.0s;

            animation-delay: -1.0s;

        }

        @-webkit-keyframes fadeAnim {

            from {

                opacity: 1

            }

            to {

                opacity: 0

            }

        }

        @keyframes fadeAnim {

            from {

                opacity: 1

            }

            to {

                opacity: 0

            }

        }

        @-webkit-keyframes bounce {

            0%,

            100% {

                -webkit-transform: scale(0.0)

            }

            50% {

                -webkit-transform: scale(1.0)

            }

        }

        @keyframes bounce {

            0%,

            100% {

                transform: scale(0.0);

                -webkit-transform: scale(0.0);

            }

            50% {

                transform: scale(1.0);

                -webkit-transform: scale(1.0);

            }

        }

    </style>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <body>

        <div class="loading" id="Js_load">

            <div class="load">

                <div class="load-cell1"></div>

                <div class="load-cell2"></div>

                <span class="load-text j_loadtext"></span>

            </div>

        </div>

        <script type="text/javascript">

            (function(window, undefined) {

                //loading

                var loader = document.getElementById("Js_load"),

                    bar = loader.querySelector(".j_loadtext"),

                    num = 0,

                    time = 0,

                    state = true;

                //加载完成

                function loadOk() {

                    if (state) {

                        state = false;

                        bar.innerHTML = "100%";

                        loader.className = "loading active";//加到100%后，关闭加载效果

                        setTimeout(function() {

                            loader.style.display = "none";

                        }, 500);

                    }

                }

                var timer = setInterval(function() {

                    num = parseInt(num + Math.random() * 10, 10);

                    time++;

                    if (num > 90) {

                        num = 90;

                    } else {

                        bar.innerHTML = num + "%";

                    }

                    if (time > 10) {

                        clearInterval(timer);

                        loadOk();

                    }

                }, 1000);

                window.onload = function() { //页面加载完成后，关闭加载效果

                    loadOk();

                };

            })(window);

        </script>

    </body>

</html>

js 实现加载百分比效果的更多相关文章

  1. js图片加载效果（延迟加载+瀑布流加载）

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  2. JS 判断滚动底部并加载更多效果。。。。。。。。。

    JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...

  3. JS实现点击加载更多效果

    适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

  4. 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法

    今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...

  5. jQuery8种不同的瀑布流懒加载loading效果

    优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果  在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...

  6. Ladda – 把加载提示效果集成到按钮中，提升用户体验

    Ladda 是一组集成了加载提示的按钮,以弥合行动和反馈之间的时间间隔,提供更好的功能使用体验.主要用于在用户点击提交之后,向用户提供即时的反馈,让他们知道浏览器正在处用户提交的任务. 您可能感兴趣的 ...

  7. js动态加载脚本

    最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法 ...

  8. 转:web前端面试题合集 (Javascript相关)（js异步加载详解）

    1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...

  9. js并行加载，顺序执行

    js并行加载,顺序执行 <script>运行脚本或加载外部文件时,会阻塞页面渲染,阻塞其他资源的加载.如果页面中需要加载多个js文件,在古老浏览器中性能会比较糟糕. 因此有了最原始的优化原 ...

随机推荐

  1. Ruby 中文编码

    Ruby 中文编码 前面章节中我们已经学会了如何用 Ruby 输出 "Hello, World!",英文没有问题,但是如果你输出中文字符"你好,世界"就有可能会 ...

  2. CSP-S 2019 —— 一个精神病人的呓语

    此生无悔入OI(话说上次的“此生无悔”还是在B站上发的弹幕2333. $HZOI$们,我们要加油!QwQ (挖坑 写在前面 学了一年,拿了$160$,也无所谓,失败者不会被人记住. 最后想做的,就是把 ...

  3. mysql数据库分页查询优化

    原博:MySQL单表百万数据记录分页性能优化 limit优化 当数据很多需要进行分页查询时:需要先查出第一条数据的id然后根据id查询大于id的数据 limt 一页的数据量 1.   直接用limit ...

  4. HDU6447 YJJ's Salesman-2018CCPC网络赛-线段树求区间最值+离散化+dp

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:Portal传送门  原题目描述在最下面.  1e5个点,问 ...

  5. Model Maker上手指南

    Model Maker上手指南 目录 1.MM可爱的脸 2.MM中的工程Project 3.新建类图 4.添加类成员 5.实现类的方法 6.生成Delphi代码 7.逆向到模型 8.完全的逆向工程 作 ...

  6. 安装mongo

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_40101530/articl ...

  7. 关于a[::-1]

    b = a[i:j]   表示复制a[i]到a[j-1],以生成新的list对象,a[:]就相当于完整复制一份a b = a[i:j:s]表示:i,j与上面的一样,但s表示步进,缺省为1.即从i到j每 ...

  8. palindrome 回文 /// Manacher算法

    判断最长不连续回文 #include <bits/stdc++.h> using namespace std; int main() { ]; while(gets(ch)) { ],an ...

  9. 一个很SB的方法，来开始调一个刚启动就SB的程序

    自己鼓捣的方法,累死我了... 遇到一个程序,这程序启动之后,会自动重新启动我的电脑, 我想调试它一下,但是遇到了问题, 如果我用调试器附加上去的话,电脑是不重起了,但是它启动了之后会立刻黑屏,全黑, ...

  10. 应用Dubbo框架打造仿猫眼项目 理解微服务核心思想

    1:传统应用带来的问题 单一业务开发的迭代问题              扩容困难              部署回滚困难2:微服务概述 微服务是一种将业务系统进一步拆分的架构风格          ...