【前端】加载资源进度条

最新推荐文章于 2024-07-30 16:49:50 发布

smile-yan

最新推荐文章于 2024-07-30 16:49:50 发布

阅读量9.9k

点赞数 3

分类专栏：我的大前端文章标签：进度条前端加载动画

本文链接：https://blog.csdn.net/smileyan9/article/details/80917554

版权

我的大前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

加载资源进度条实现很简单，特别是在使用Bootstrap之后。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script>
        var length=10;
        setInterval(
            function(){
                $("#loading_length").attr("style","width:"+length+"%");
                length+=5;
            },100
        );
    </script>
</head>
<body>

<div class="container" style="padding-top:50px;">
    <div class="progress"style="height:60px">
        <div id="loading_length" class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div>
    </div>
</div>

</body>
</html>

效果如下：