PHP 怎么PHP 加载动画

wen PHP项目 2026-07-29 267

本文目录导读：

PHP 怎么PHP 加载动画

方案一：纯 CSS + PHP 输出（最简单）
方案二：AJAX + PHP（异步加载，最常用）
方案三：PHP 流式输出 + 进度动画
选择建议

在 PHP 中实现加载动画，主要有以下几种常见方式，由于 PHP 是服务端语言，而加载动画是前端（浏览器端）的效果，所以通常需要结合 HTML、CSS 和 JavaScript 来实现。

以下是几种常用的方案：

纯 CSS + PHP 输出（最简单）

适用于页面整体加载时的动画（例如全屏加载遮罩）。

步骤：

在 PHP 输出 HTML 时，直接包含 CSS 动画代码。
使用 sleep() 模拟 PHP 处理时间（实际开发中替换为你的真实业务逻辑）。

代码示例 (loading.php)：

<?php
// 模拟 PHP 处理耗时任务（比如数据库查询、文件处理）
// 实际开发中请删除 sleep()
sleep(2); 
// 你的实际业务逻辑...
$data = "Hello, World!";
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">PHP 加载动画示例</title>
    <style>
        /* 方式1：全屏加载遮罩（只在页面加载时显示） */
        .loading-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            /* 默认显示，用 JS 隐藏 */
        }
        .loading-overlay.hidden {
            display: none;
        }
        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* 方式2：内嵌动画（更优雅） */
        .content-loading {
            border: 2px solid #e0e0e0;
            padding: 20px;
            position: relative;
        }
        .content-loading .skeleton {
            background: #f0f0f0;
            height: 20px;
            margin: 10px 0;
            border-radius: 4px;
            animation: pulse 1.5s ease-in-out infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 1; }
        }
    </style>
</head>
<body>
<!-- 方式1：全屏加载动画（默认显示） -->
<div id="loadingOverlay" class="loading-overlay">
    <div class="spinner"></div>
</div>
<!-- 页面主要内容 -->
<div class="content-loading">
    <h1><?php echo $data; ?></h1>
    <p>这是 PHP 处理后的内容。</p>
    <!-- 骨架屏示例 -->
    <div class="skeleton" style="width: 60%;"></div>
    <div class="skeleton" style="width: 80%;"></div>
    <div class="skeleton" style="width: 40%;"></div>
</div>
<script>
    // 页面加载完成后隐藏加载动画
    window.addEventListener('load', function() {
        document.getElementById('loadingOverlay').classList.add('hidden');
    });
</script>
</body>
</html>

原理：

PHP 先处理（用 sleep 模拟），然后一次性输出完整 HTML。
CSS 动画在浏览器渲染时自动播放。
window.load 事件触发后隐藏动画。

AJAX + PHP（异步加载，最常用）

适用于点击按钮或滚动加载时显示动画,不刷新整个页面。

步骤：

PHP 输出静态页面（含按钮和动画元素）。
用户点击按钮 -> JavaScript 发起 AJAX 请求 -> 显示加载动画。
PHP 处理请求并返回数据（JSON 或 HTML）。
JavaScript 接收数据 -> 隐藏动画 -> 更新页面内容。

HTML/CSS/JS 文件 (index.html 或 index.php 的前端部分)：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">AJAX 加载动画</title>
    <style>
        #loading {
            display: none;
            text-align: center;
            margin: 20px;
        }
        .spinner {
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 3px solid #ddd;
            border-top: 3px solid #007bff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        #result {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            min-height: 50px;
        }
    </style>
</head>
<body>
    <button id="loadBtn">加载数据</button>
    <div id="loading">
        <div class="spinner"></div>
        <p>正在加载中...</p>
    </div>
    <div id="result">
        点击按钮加载数据
    </div>
    <script>
        document.getElementById('loadBtn').addEventListener('click', function() {
            // 显示加载动画
            document.getElementById('loading').style.display = 'block';
            document.getElementById('result').innerHTML = '';
            // 发起 AJAX 请求
            fetch('api.php?action=get_data')
                .then(response => response.json())
                .then(data => {
                    // 隐藏加载动画
                    document.getElementById('loading').style.display = 'none';
                    // 显示结果
                    document.getElementById('result').innerHTML = 
                        `<p>名称：${data.name}</p><p>时间：${data.time}</p>`;
                })
                .catch(error => {
                    document.getElementById('loading').style.display = 'none';
                    document.getElementById('result').innerHTML = '加载失败';
                });
        });
    </script>
</body>
</html>

PHP 文件 (api.php)：

<?php
// 模拟耗时操作（如数据库查询）
sleep(2);
// 返回 JSON 数据
header('Content-Type: application/json');
echo json_encode([
    'name' => '张三',
    'time' => date('Y-m-d H:i:s'),
    'status' => 'success'
]);
?>

PHP 流式输出 + 进度动画

适用于文件上传、大文件处理等需要显示进度的场景。

原理：使用 PHP 的 flush() 和 ob_flush() 逐步输出数据，前端通过 EventSource 或长轮询读取进度。

简化示例（更复杂建议使用 WebSocket）：

<?php
// 禁用输出缓冲
ob_implicit_flush(true);
ob_end_flush();
for ($i = 1; $i <= 100; $i++) {
    // 模拟处理
    usleep(50000); // 0.05秒
    // 输出进度（格式：data: 数字\n\n 适合 SSE）
    echo "progress: $i\n";
    flush();
}
?>

前端使用 EventSource 监听。

选择建议

场景	推荐方案
整个页面加载的动画	方案一（纯 CSS + `window.load`）
文件上传/实时进度	方案三（流式输出 + SSE）或 WebSocket
高性能/复杂交互	考虑使用 Vue/React 框架 + PHP API