我想添加一个“加载…”页面呈现大量HTML时的状态

基础概念

“加载…”页面通常被称为加载指示器或加载动画，它在网页或应用加载大量HTML内容时显示，以告知用户内容正在加载中，从而提升用户体验。

类型

进度条：显示加载进度的条形图。
旋转图标：一个不断旋转的图标，表示正在加载。
动画文字：如“加载中…”这样的文字配合动画效果。
自定义动画：根据需求定制的复杂动画效果。

应用场景

网页加载大量数据时。
应用启动时。
用户执行需要后台处理的操作时。

实现方法

以下是一个简单的HTML和JavaScript示例，展示如何实现一个基本的加载指示器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载示例</title>
    <style>
        #loader {
            display: none; /* 默认隐藏 */
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: rgba(255, 255, 255, 0.8) url('loader.gif') 50% 50% no-repeat;
        }
    </style>
</head>
<body>
    <div id="loader"></div>
    <button onclick="loadContent()">加载内容</button>
    <div id="content"></div>

    <script>
        function loadContent() {
            var loader = document.getElementById('loader');
            loader.style.display = 'block'; // 显示加载指示器

            setTimeout(function() {
                loader.style.display = 'none'; // 隐藏加载指示器
                document.getElementById('content').innerHTML = '<h1>内容已加载</h1>';
            }, 3000); // 模拟3秒的加载时间
        }
    </script>
</body>
</html>