简单版本

在项目的 public/admin/css/ 目录下创建 loading.css 文件（如果目录不存在请手动创建）：

/* 全局加载遮罩层 */
.admin-loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

/* 加载动画样式（旋转的圆圈） */
.admin-loading-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); }
}

/* 加载完成后隐藏 */
.admin-loading-mask.hidden {
    opacity: 0;
    pointer-events: none;
}

js

在项目的 public/admin/js/ 目录下创建 loading.js 文件：

$(function () {
    // 1. 添加加载动画的HTML结构到页面
    const loadingHtml = `
        <div class="admin-loading-mask">
            <div class="admin-loading-spinner"></div>
        </div>
    `;
    $('body').prepend(loadingHtml);

    // 2. 监听所有AJAX请求开始事件 - 显示加载动画
    $(document).ajaxStart(function () {
        // 只在列表页面显示加载动画（可根据需要调整选择器）
        if ($('.grid-table').length > 0) {
            $('.admin-loading-mask').removeClass('hidden');
        }
    });

    // 3. 监听所有AJAX请求完成事件 - 隐藏加载动画
    $(document).ajaxComplete(function () {
        // 延迟一点隐藏，避免动画闪烁
        setTimeout(() => {
            $('.admin-loading-mask').addClass('hidden');
        }, 300);
    });

    // 4. 初始页面加载完成后隐藏（处理首次加载）
    $(window).on('load', function () {
        $('.admin-loading-mask').addClass('hidden');
    });
});

在 Laravel-admin 中引入自定义资源

打开项目中的 app/Admin/bootstrap.php 文件，添加以下代码来引入自定义的 CSS 和 JS 文件：

use Encore\Admin\Facades\Admin;

// 引入自定义加载动画样式
Admin::css('/admin/css/loading.css');

// 引入自定义加载动画脚本（注意要在jQuery之后引入）
Admin::js('/admin/js/loading.js');