js 实现加载百分比效果

最新推荐文章于 2024-04-12 10:39:56 发布

Macdull2014

最新推荐文章于 2024-04-12 10:39:56 发布

阅读量619

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/linjiangxian/p/11464725.html

版权

效果：

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>

转载于:https://www.cnblogs.com/linjiangxian/p/11464725.html

Macdull2014

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 实现加载百分比效果

效果：html:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>加载效果</title> </head> <style> ...
复制链接

扫一扫