HTML+CSS+JS实现网页初始加载动画（loading）

最新推荐文章于 2024-02-04 15:50:30 发布

爱洋芋的土豆丶

最新推荐文章于 2024-02-04 15:50:30 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签： html5 javascript css

本文链接：https://blog.csdn.net/weixin_45848992/article/details/119721446

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先需要找一个loading的gif，在这里提供一个比较简单的加载动画

然后是代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <style>
        /* 将background-image中url改成自己gif的路径即可 */
        .preloader {
            position: fixed;
            left: 0px;
            top: 0px;
            height: 100%;
            width: 100%;
            z-index: 99999;
            background-color: #ffffff;
            background-position: center center;
            background-repeat: no-repeat;
            background-image: url(https://2021.igem.org/wiki/images/b/bc/T--ECUST_China--preloader.gif);
        }
        .content {
            height: 1000px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 加载动画 -->
    <div class="preloader"></div>

    <!-- 网页内容 -->
    <div class="content"></div>

    <script>
        //低版本jquery用的是$(window).load()函数，高版本用的是$(window).on()
        $(window).on('load',function handlePreloader() {
            if ($('.preloader').length) {
                $('.preloader').delay(200).fadeOut(500);
            }
        });
    </script>
</body>

</html>

爱洋芋的土豆丶

关注

1
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS实现网页初始加载动画（loading）

首先需要找一个loading的gif，在这里提供一个比较简单的加载动画然后是代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w.
复制链接

扫一扫