phpMyAdmin 4.9+ 替换 loading 动画的实际路径是修改当前启用主题的 CSS(如 ./themes/pmahomme/css/theme.css)中 .ajax_overlay::before 伪元素及 @keyframes pmahomme-spin 动画规则,或通过 config.inc.php 注入自定义 CSS/JS 文件实现;直接替换 GIF 文件无效,且需清除 ./tmp/ 缓存确保生效。
phpMyAdmin 4.9+ 版本中替换 loading 动画的实际路径
新版 phpmyadmin(4.9 及以后)已移除传统 gif 加载图,改用 css 实现的 .ajax_overlay 遮罩层 + svg 动画。直接替换 ./themes/pmahomme/img/ajax_clock_small.gif 不再生效——这个文件甚至可能根本不存在。
真正起作用的是 ./js/dist/ajax.js 中注入的内联 SVG,以及 ./css/common.css 里定义的 .ajax_overlay::before 伪元素动画规则。
- 修改入口在
./themes/pmahomme/css/theme.css(或你当前启用的主题 CSS) - 搜索
.ajax_overlay::before或loading-spinner相关声明 - 若使用自定义主题,优先覆盖该主题下的 CSS,而非修改
common.css(避免升级被覆盖)
用纯 CSS 替换为自定义 SVG 动画的写法
不依赖外部资源、兼容性好、无需改 JS,这是最稳妥的方式。关键点在于复写伪元素内容和动画逻辑。
在你的主题 CSS 文件末尾添加:
/* 覆盖默认 loading 动画 */
.ajax_overlay::before {
content: "";
display: block;
width: 40px;
height: 40px;
margin: -20px auto 0;
background: transparent;
border: 3px solid #ccc;
border-top-color: #337ab7;
border-radius: 50%;
animation: pmahomme-spin 1s linear infinite;
}
<p>@keyframes pmahomme-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}-
border和border-top-color控制双色环效果;调色可直接改#337ab7 - 动画名必须唯一(避免与 phpMyAdmin 自带的
@keyframes spin冲突),所以用了pmahomme-spin - 不要删掉
margin: -20px auto 0,否则图标会偏上或错位
想用 PNG/GIF 图标?必须绕过 JS 注入逻辑
phpMyAdmin 的 JS 在发起 AJAX 前会动态创建 .ajax_overlay 并插入一个硬编码的 SVG 字符串。想强行塞进 <img>,得劫持它的 DOM 插入时机。
立即学习“PHP免费学习笔记(深入)”;
可行但高风险的做法(仅限开发环境测试):
// 在 ./js/dist/ajax.js 末尾或自定义 JS 中追加
$(document).on('ajaxStart', function () {
setTimeout(function () {
$('.ajax_overlay').find('svg').replaceWith(
'<img src="./custom/loading.gif" alt="loading" width="40" height="40">'
);
}, 10);
});- 必须用
setTimeout,因为.ajax_overlay是异步插入的,ajaxStart触发时 DOM 还没渲染完 -
./custom/loading.gif路径需确保 Web 服务器可访问(建议放./js/custom/下并配好权限) - 升级 phpMyAdmin 后,
ajax.js被覆盖,此补丁即失效;更安全的做法是通过config.inc.php注入自定义 JS(见下条)
通过 config.inc.php 安全注入自定义 JS/CSS
比直接改源码强得多:升级不丢失,且只对当前实例生效。
在 config.inc.php 末尾添加:
$cfg['HeaderExtraScripts'] = [
'files' => [
'./js/custom/loading-override.js',
'./css/custom/loading-theme.css',
],
];-
./js/custom/loading-override.js里放上一节的ajaxStart补丁(推荐加防重逻辑) -
./css/custom/loading-theme.css里放 SVG 动画 CSS(比改主题 CSS 更隔离) - 注意路径是相对于 phpMyAdmin 根目录的;确保这两个文件存在且可读
- 如果启用了
$cfg['EnableBundledScripts'] = false,此项才真正生效
实际生效前记得清空浏览器缓存和 phpMyAdmin 的临时 CSS/JS 缓存(./tmp/ 目录)。最常被忽略的是:你以为改了 CSS,但浏览器还在用旧的 common.min.css 缓存——这时候连 Ctrl+F5 都不一定管用,得手动删 ./tmp/ 里的哈希文件。



















