HTML+CSS实现页面加载（变灰显示请稍等、页面控件不可用）

最新推荐文章于 2025-09-09 17:15:00 发布

原创最新推荐文章于 2025-09-09 17:15:00 发布 · 6.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

HTML+CSS

当前文章被收录于：

HTML+CSS

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一个简单的页面加载效果实现方案，使用HTML、CSS和JavaScript来创建一个遮罩层和加载提示，通过设置元素的位置和样式属性，实现了居中显示的加载动画。

页面代码

<html>
    <head>
        <script type="text/javascript">
        function demo(){
            $("body").css({
                "margin":"0px"
            });
            $("#loading").css({
                "position":"absolute",
                "display":"block",
                "background-color":"gray",
                "z-index":"1000",
                "opacity":"0.5"
                });
            $("#txt").css({
                "position":"absolute",
                "display":"block",
                "left":"50%",
                "top":"50%",
                "z-index":"10000"
            });
        }
    </script>
    </head>
    <body>
         <div id="loading" style="width:100%;height:100%;display:none"></div>
         <div id="txt" style="display:none">
             请稍等 <img alt="" src="img/loading.gif" style="height:16px">
         </div>
    </body>
</html>