zoukankan      html  css  js  c++  java
  • js页面加载进度条(这个就比较正式了,改改时间就完事儿)

    不废话,直接上代码

    思路不难,就是一个animate方法配合随机数

    duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <style>
    body { margin: 0; }
    #progress { position: fixed; height: 2px; background: #2085c5; transition: opacity 500ms linear }
    #progress.done { opacity: 0 }
    #progress span { position: absolute; height: 2px; -webkit-box-shadow: #2085c5 1px 0 6px 1px; -webkit-border-radius: 100%; opacity: 1; width: 150px; right: -10px; -webkit-animation: pulse 2s ease-out 0s infinite; }
    @-webkit-keyframes pulse {  30% {
     opacity:.6
    }
     60% {
     opacity:0;
    }
     100% {
     opacity:.6
    }
    }
    </style>
    </head>
    
    <body>
    <div id="progress"><span></span></div>
    <script>
    $({property: 0}).animate({property: 100}, {
        duration: 3000,
        step: function() {
            var percentage = Math.round(this.property);
    
            $('#progress').css('width',  percentage+"%");
            if(percentage == 100) {
                $("#progress").addClass("done");//完成,隐藏进度条
            }
        }
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    .charAt()方法
    CustomerBiz方法运用
    面向对象_方法 判断
    方法
    查找无序数组索引
    面向对象_购票
    创建类 方法 构建类对象
    StringBuffer 方法
    docker创建redis mysql 等服务
    docker常用的命令
  • 原文地址:https://www.cnblogs.com/Sinhtml/p/4537708.html
Copyright © 2011-2022 走看看