实现页面加载进度条

最新推荐文章于 2024-07-19 15:32:49 发布

The_upside_of_down

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量1.3k

点赞数

分类专栏： css动画

本文链接：https://blog.csdn.net/The_upside_of_down/article/details/100659121

版权

css动画专栏收录该内容

0 篇文章 0 订阅

订阅专栏

 <style>
        body {
            margin: 0;
        }
        #progress {
            height: 2px;
            background: darkorange;
        }
        @-webkit-keyframes pulse {
            0% {
                width: 0;
            }
            100% {
                width: 100%;
            }
        }
        #progress {
            -webkit-animation: pulse 3s;
        }
        #progress.done {
            opacity: 0;
        }
    </style>

<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>